uploadfile图片覆盖_vue+el-upload自定义图片上传，删除，预览

element-ui提供了上传文件的方法，我们先看一下个方法示例：

// 图片列表缩略图

class="upload-demo"

action="https://jsonplaceholder.typicode.com/posts/"

:on-preview="handlePreview"

:on-remove="handleRemove"

:file-list="fileList"

list-type="picture">

点击上传

只能上传jpg/png文件，且不超过500kb

export default {

data() {

return {

fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]

};

},

methods: {

handleRemove(file, fileList) {

console.log(file, fileList);

},

handlePreview(file) {

console.log(file);

}

}

}

这个是官方示例，使用的组件上action进行图片上传，这个图片上传有一些缺点：

无法自定义上传方法，必须指定完整的图片上传路径

一般后台都有设置token，如果需要加token还需要加headers参数，自定义token

目前发现的是在这两个缺点，针对此，决定使用自定义上传事件，el-upload组件也提供了相应的方法：

image.pn