element ui 图片上传与图片删除（手动上传）

此处无声胜有声~~咳咳~~  上代码： 

第一部分、html页面代码

<el-upload
        action="#"
        list-type="picture-card"
        accept=".jpg, .jpeg, .png"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleimageChange"
        :on-change="handleimageChange"
        :limit="5"
        :auto-upload="false"
        :multiple="true"
        :file-list="upload_img.imageList"
>
    <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>

 第二部分、js代码

new Vue({

    data:{
        upload_img:{
                imageList: [], //图片数据列表,用于之后上传到后端
                imageName: []  //图片名称
        },
        dialogImageUrl: '',
        dialogVisible: false
    },
    methods:{
        //点击查看图片
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        // 上传发生变化钩子
        // 注意 :on-remove="handleimageChange"与:on-change="handleimageChange" 都绑定这个方法，这样无论是上传图片还是移除图片，都会更新图片数据列表
        handleimageChange(file, fileList) {
            this.upload_img.imageList = fileList;
            console.log(fileList)
        },
        //图片上传：提交表单
        submitForm() {

            //上传类型
            let config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            };
            // 创建新的数据对象   多文件上传
            let formData = new FormData();
            // 将上传的文件放到数据对象中
            this.upload_img.imageList.forEach(file => {
                formData.append('images', file.raw);
                this.upload_img.imageName.push(file.name);
            );
            // console.log("提交前",formData.getAll('images'));
            // 图片名
            formData.append('imageNames',this.upload_img.imageName);
                    
            // 自定义上传
            axios
                .post('输入你要上传到的后端接口...', formData, config)
                .then((res) => {
                    this.$message.success('上传成功!')
                })
                .catch((err) => {
                    this.$message.error('上传失败!')
                })
            });
        },
    }


})

end~~~以上内容纯手敲，如果发现有错的地方请指出，若对您有帮助的话，别忘了点赞支持下哟~