使用的是element-ui的upload插件。
<el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"> <i class="el-icon-plus"></i> </el-upload>
他的请求地址写在了acion里面,与实际请求不符合,后查询了相关事件,改为了:【加了:http-request, acion里面可以随便写】
<el-upload action="123" ref="uploadq" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :http-request="UploadFile" >
使用formData进行处理
UploadFile(param) { this.file = param.file; this.key = param.file.name; let form = new FormData(); form.append("file", this.file); form.append("key", this.key); APIFILE.fileUpload(form).then(result => { if (result.code === 0) { this.urlPath.push(result.imgUrlPath); } } ,err=>{ this.$message.error({ showClose: true, message: err.toString(), duration: 2000 }); } ).catch(error=>{ this.$message.error({ showClose: true, message: "请求出现异常", duration: 2000 }); }) },
还有一种是input把type改成file。
<input type="file" name value @change="tirggerFile($event)" id="hiddenInput" />
tirggerFile(event){ let file = event.target.files[0]; this.files = file; this.keys = file.name; let param = new FormData(); param.append("file", this.files); param.append("key", this.keys); //后面代码与upload类似,请求后端。略过。 }