Vue Element-ui 图片跟随表单一起上传

实现例如用户注册信息填写，商品发布等等需求时，通常会有需要上传图片的需求。这个时候我们可以使用Element-UI的el-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>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<script>
  export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    }
  }
</script>

但是我们如果直接将这段代码放上去使用，不修改的话就会出现几个问题。图片一旦选择就直接通过后端上传到了数据库，如果用户想要修改上传的图片，那旧图片却已经在数据库中存在。无法实现图片与表单中的其他数据一起上传的需求。

所以为了实现图片跟随表单上传的需求，我们需要先关闭el-upload的自动上传，再将图片信息上传到一个FormData 对象中，当提交表单的时候，先将这个对象上传到后端，后端将图像存储到数据库中，并返回相应的图片信息，前端获取到这些图片信息后，赋值到相应的表单数据，再上传整张表单。

前端：

<el-form-item label="图片"  prop="img">
    <el-input v-model="ruleForm.img" v-if="false"></el-input>
    <el-upload
               action=""
               ref="uploadimg"
               list-type="picture-card"
               :auto-upload="false"
               :data="ruleForm"
               :file-list="ruleForm.img"
               :on-preview="handlePictureCardPreview"
               :on-remove="handleRemove"
               :on-change="handleChange"
               :http-request="uploadFile">
        <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="adoptFormdialogVisible">
        <img width="100%" :src="adoptFormdialogImageUrl" alt="">
    </el-dialog>
</el-form-item>

<script>
    export default {
    name: "Tab",
    data() {
      return {
        dialogFormVisible: false,
        adoptFormdialogVisible: false,
        adoptFormdialogImageUrl:'',
        classify: [],
        hasLogin: false,
        dialogFormVisible: false,
        ruleForm: {
          id: '',
          name: '',
          introduce: '',
          price: '',
          banner: '',
          classify_id: '',
          status: '1',
          user_id: '1'
        },
        rules: {
          name: [
            { required: true, message: '请输入标题', trigger: 'blur' },
            { min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' }
          ],
          introduce: [
            { required: true, message: '请输入摘要', trigger: 'blur' }
          ],
          price: [
            { required: true, message: '请输入价格，自动保留两位小数', trigger: 'blur' }
          ],
          classify: [
            { required: true, message: '请选择商品类别', trigger: 'blur' }
          ]
        },
        activeTab: 'first',
        showHeader: false,
        formData:'' 
      };
    },
    methods: {
      submitForm(formName){// 用户点击上传表单后
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.formData = new FormData()
            this.$refs.uploadimg.submit();
            // 先上传图片，图片存在formData中
            this.$axios.post("/file/upLoad", this.formData).then( res =>{
              console.log(res)
              this.ruleForm.banner = res.data.data // 返回图片相关信息，例如图片名称
              // 表单上传