vue+element+upload上传图片+手动移除
vue+element+upload上传图片+手动移除
·
< el-upload
class="upload-demo"
action="#"
:on-success="handleAvatarSuccess"
:on-preview="handlePreview"
:before-remove="beforeRemove"
multiple
:before-upload="ZCbeforeUpload"
:on-remove="handleRemove"
:file-list="fileList">
< el-button size="small" type="primary">< i class="el-icon-upload" >< /i>上传文件</ el-button>
//提示语。根据实际情况写
< div slot="tip" class="el-upload__tip" style="color:#8A898A">仅支持上传图片或PDF格式文件</ div>
</ el-upload>
**:before-upload="beforeUpload"**
上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。
**beforeUpload**(file) {
如果内容较大,加个loading比较好
this.loading = true;
let fd = new FormData();
var that = this;
fd.append("file", file); //传文件
如果有其他参数就是这样继续写 fd.append("id", 5); //其他参数
that.$http.post("/upload", fd).then(function (res) {
if (res.data.code == "200") {
that.loading = false;
that.$message.success("上传成功");
//将需要的存到数组。
that.fileList.push({
name: res.data.newFileName,
filepath: res.data.fileName,
url: res.data.url,
});
}
});
//这步我是用于回显。控制台会报错,不影响。但是不好看。(如果有更好的请指教)
that.imageUrl = window.URL.createObjectURL(file.raw);
},
//移除
//on-remove 文件列表移除文件时的钩子。我移除没有走接口。就得手动移除
//file-List 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}].
(如果一个页面有多个上传。fileList不可以同名字。或者自己进行封装。)
handleRemove(file, fileList) {
this.$confirm(`确定移除 ${file.name}?`);
// 去重,这块得把相同的url对比进行去除。要不然他是没有真正的删除。再次上传还是会出现之前删除的文件
let fileIndex = this.fileList.findIndex((item) => item.url == file.url);
this.fileList.splice(fileIndex, 1);
},
这是vue+element+upload上传图片,手动移除掉的功能。请大家多指教。
更多推荐
已为社区贡献1条内容
所有评论(0)