原创 

干货 flask + element ui upload 一次上传多个文件

分类:前端    703人阅读    IT小君  2022-09-24 17:23

标签代码:

 <el-upload accept="image/*"
  class="upload-demo"
  ref="uploadImgs"
  :on-success="handleCoverSuccess"
  multiple
  :limit="9"
  :file-list="fileList"
  :on-change="changeFile"
:on-remove="removeFile"
        :auto-upload="false" 
  list-type="picture-card">
  <i class="el-icon-plus"></i>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>

vue js 代码

changeFile(file, fileList) {
      this.fileList = fileList; // 再一次赋值
    },
    removeFile(file, fileList) {
      this.fileList = fileList; // 再一次赋值
    },
    submitUpload(id) {
        let formData = new FormData()
        for (let i = 0; i < this.fileList.length; i++) {
          formData.append("files", this.fileList[i].raw) // formdata 添加数组的独特方式
        }
        formData.append("id", id)
        formData.append("type", 'image')
        formData.append("typeClass", "sourceCode")
        let self = this
        this.$axios({
          method: 'post',
          url: '/upload',  // 后端接口地址
          headers: {'Content-Type': 'multipart/form-data'},
          data: formData
        }).then((res) => {
          debugger
          if (res.data == "success") {
            self.$message({
              showClose: true,
              message: "项目截图上传成功",
              type: "success",
              duration: 5000,
            });
          }
        }).catch(function (ex) {
          console.error(ex)
         self.$message({
              showClose: true,
              message: "上传失败",
              type: "error",
              duration: 5000,
            });
        });
    }

python  代码:

 @app.route('/file/upload', methods=['POST'])
    def fileUpload():
        data = request.form

        base = app.config['IMG_ROOT']
        for f in request.files.getlist("files"):
            fi = File()
            t = time.time()
            ...
        return 'success'
支付宝打赏 微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

 工具推荐 更多»