vue---elment框架里 上传组件的 上传视频和上传图片 的使用心得 -夜狼博客

1.为了大家看的清楚点,html部分截图展示;代码在图片下面”:

都市极品医神(叶辰夏若雪孙怡) <!-- 展示文件资源地址的输入框 --> <div class="fengmian"> <span class="fengmian_sp1">封面地址:</span> <span class="fengmian_sp2">{{BianJiAccountForm.cover}}</span> </div> <!-- 上传封面的html代码 --> <el-form-item prop="filePic" class="shipin_tuoru-kk"> <el-upload class="upload-demo" multiple name="filePic" drag ref="upload" action="string" :on-change="handlechange_filePic" :file-list="fileList" :auto-upload="false" accept=".jpg, .jpeg, .png, .gif, .bmp, .pdf, .JPG, .JPEG, .PBG, .GIF, .BMP, .PDF" :limit="1" :on-remove="handleRemove_filePic" list-type="picture"> <i class="el-icon-upload"></i> <div class="el-upload__text">将要 <em>更换的封面</em>文件拖到此处,或 <em>点击此处从文件里选择</em> </div> <div class="el-upload__text"> <em>图片必须拖入框框内</em> </div> </el-upload> </el-form-item> <!-- 促发上传的事件按钮 --> <el-button @click="sendRequest(2)" type="danger">更换封面</el-button>

2.为了大家看的清楚点,变量部分截图展示;代码在图片下面”:

都市极品医神(叶辰夏若雪孙怡) //需要的变量 data(){ return{ fileList:[], //存放要上传的文件数据 } }

3.为了大家看的清楚点,函数方法部分截图展示;代码在图片下面;截图和下面的代码有点区别,代码我吧没必要的删除了,大家对比下”:

都市极品医神(叶辰夏若雪孙怡) //需要的方法函数 methods :{ //删除封面 handleRemove_filePic(file) { this.fileList = []; }, //选取要上传的封面后 将内容添加到 数组中 handlechange_filePic(file, fileList) { let value = fileList[0]; this.fileList.push(value.raw); this.fileList = fileList; }, //点击编辑里更换封面的按钮事件 sendRequest() { //先判断 ,如果这个变量为空,说明没有选择本地资源,弹窗提示先选择内容 if (this.fileList.length == 0) { this.$message("封面为空,请选择要修改的封面"); return false } //上传文件的参数 格式 let fd = new FormData(); fd.append("item", 'avatar'); //根据接口文档 填写的标识 比如 要上传图片:就是img 视频就是video 这个得看借口文档 fd.append("file", this.fileList[0].raw); //从本地选择好的文件 fd.append("time", this.common.fromData.time); fd.append("platform", this.common.fromData.platform); fd.append("version", this.common.fromData.version); //定义好参数后,发送请求,将文件资源发送给服务器,成功后 会返回资源链接 this.https(this.apiList.upload, fd).then(response => { if (response.data.code == this.common.code) { let path = response.data.data[0].path //返回的资源链接 this.addAccountForm.cover = path //将返回的资源链接 赋值给input 输入框,,显示出来 this.tc_element(response.data.msg,response.data.code,2,"添加封面") //成功的提示 this.fileList = []; //完成后 清空数据 } }) }, }

都市极品医神(叶辰夏若雪孙怡)小说,最新章节阅读

都市极品医神(叶辰夏若雪孙怡):第1章 滚吧! 我不想杀人!, 【火爆爽文】“古武者?地狱归来?华夏第一人?我惹不起?不好意思,在我面前,都要跪下!”五年前,家族覆灭,废物叶辰犹如地上蠕虫般被人耻笑!但是五年后,他带着一身逆天术法强势回归!更可怕的是,他背后还站.. ,免费阅读时空书城

如果这个文章对你有帮助,请支持下站长的努力付出,点击下方是本人的网站:时空书城,谢谢

时空书城