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章 滚吧！ 我不想杀人！, 【火爆爽文】“古武者？地狱归来？华夏第一人？我惹不起？不好意思，在我面前，都要跪下！”五年前，家族覆灭，废物叶辰犹如地上蠕虫般被人耻笑！但是五年后，他带着一身逆天术法强势回归！更可怕的是，他背后还站.. ,免费阅读时空书城
阅读更多

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

时空书城