关于element upload上传图片调用多次接口及实现表单数据和图片一起上传问题解决方案

最新推荐文章于 2025-02-24 14:28:45 发布

Luminary7

最新推荐文章于 2025-02-24 14:28:45 发布

阅读量1.3k

点赞数

分类专栏： element 文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/Luminary7/article/details/126486148

版权

element 专栏收录该内容

3 篇文章

订阅专栏

这段代码展示了如何在Vue中创建一个包含问题场景选择、反馈内容输入和图片上传的表单。表单数据以multipart/form-data格式提交，用于用户在使用企惠查时提供问题反馈。提交时会验证表单，若包含图片则将图片文件一并上传，同时限制了图片的数量、格式和大小。预览、删除图片的功能也得到了实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <el-form enctype="multipart/form-data"  :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="问题场景" prop="problemSceneCode">
              <el-radio-group v-model="ruleForm.problemSceneCode" size="medium">
                <el-radio border v-for="item in CodeProblemSceneList" :key="item.value" :label="item.value">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="反馈内容" prop="content">
              <el-input 
                type="textarea"
                maxlength="300" 
                show-word-limit
                class="feedbackInputTextArea"
                placeholder="请描述在使用企惠查时遇到的问题和改进建议，上传截图可以让我们更快捷地解决问题"
                v-model="ruleForm.content"></el-input>
            </el-form-item>
            <el-form-item label="上传图片" prop="files"> 
              <div class="feedbackFlexBox">
                <div class="feedbackRightBox">
                  <el-upload
                    action="#"
                    ref="upload"
                    list-type="picture-card"
                    :auto-upload="false"
                    :file-list="fileList"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :on-change="handleChange"
                    accept=".jpg,.png,.jpeg"
                    :data="ruleForm"
                    :limit="3"
                  >
                    <i class="el-icon-plus"></i>
                    <div slot="tip" class="el-upload__tip">仅支持上传PNG、JPG、JPEG格式，大小不超过1M。最多上传三张图片</div>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="" />
                  </el-dialog>
                </div>
              </div>
            </el-form-item>
        
        </el-form>

 ruleForm: {
    problemSceneCode: [],
    content: '',
    file: [],
  },
  fileList: [],

// 预览图片方法
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;

    },
     // 删除图片方法
    handleRemove(file, fileList) {
      if (fileList.length == 2) {
        setTimeout(() => {
          document.getElementsByClassName(
            "el-upload--picture-card"
          )[0].style.display = "";
        }, 1500);
      }
    },
     handleChange (file, fileList) {
        this.fileList = fileList
      },

重点
const formData = new FormData()
formData.append(‘problemSceneCode’, this.ruleForm.problemSceneCode)
formData.append(‘content’, this.ruleForm.content)

submitForm(formName,file) {
          let vm = this;
          this.$refs[formName].validate((valid) => {
              let params = []
              if (valid) {
                // 上传了图片
                if(this.ruleForm.file ){
                    const formData = new FormData()
                    formData.append('problemSceneCode', this.ruleForm.problemSceneCode)
                    formData.append('content', this.ruleForm.content)
                    this.fileList.forEach(item => {
                       formData.append('file', item.raw)
                    })
                    params = formData
                }else{
                    params =  this.ruleForm
                }

                this.API.postForm(this.API.url.insertFeedBackInfo, params)
                    .then((res) => {
                        this.feedbackDialogVisible = false
                        this.$message.success("反馈成功");
                        this.ruleForm={
                          problemSceneCode: [],
                          content: '',
                          file:  [],
                        }
                        this.fileList = []
                    })
                    .catch((res) => {
                      this.$message.error(res.msg);
                    });    
                 
              } else {
                  return false;
              }
          });
      },

api
‘content-type’: ‘multipart/form-data’

const postForm = function (url, params) {
  return new Promise((resolve, reject) => {
      axios({ 
        headers: {
          'content-type': 'multipart/form-data'
        },
        method: 'post',
        url: url,data: params }).then(res=> {
        if (res.status == "200") {
          resolve(res.data);
        }else {
          reject(res);
        }
      });

  });
  
};