关于vue使用element ui中upload的问题

Question

如下图的form组件中，element ui中upload的action需要提交一次后台，提交按钮又要再次提交一次后台吗？
请问element ui中包含upload的form表单如何实现？

Answer 1

on-success 会将 response 返回，如果还需随表单保存上传后的图片信息，可以从 response 中取得，再随表单一起提交。

Answer 2

主要跟后端的数据结构有关。

1.一般来说，上传图片的回调得到的是图片url，可能还有这张图片的标识等等，具体看业务需要。

2.最终的提交按钮，提交的是整个form表单的内容，其中只是包括了已经上传的图片的信息而已，至于要传些什么，需要跟后端协商好接口。

Answer 3

两次提交的业务不同：第一次提交是起上传图片到服务器的作用，保存在服务器，上传成功后会返回该图片的路径；第二次提交的是可以把这个第一次的路径保存在数据库中，就可以从数据库中获取该字段的图片信息

Answer 4

<el-upload
    list-type="picture-card"
    :on-success="setImgInfo"
    auto-upload
>

data() {
    return {
        formData: {
            mdName: '',
            mdUrl: '',
            mdInfo: '',
            mdImg: {
                // 图片信息
            }
        }
    };
},
methods:{
    setImgInfo(response, file, fileList) {
        // 通过异步上传成功后，依据返回的参数组装 `mdImg` 图片路径等信息；
        // 点击`提交`按钮是保存包括图片信息的表单信息；
    }
}