项目实训2022

发布和编辑作业中的关键功能添加图片，之前调试老是出bug最后发现multipart file需要文件的属性而不是整个文件。

前端：

<el-upload
              class="upload-demo"
              ref="upload"
              action="#"
              :before-upload="beforeUploadFile"
              :on-change="fileChange"
              :on-exceed="exceedFile"
              :on-success="handleSuccess"
              :headers="file_header"
              :on-error="handleError"
              :file-list="imgFileList"
              list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过1mb</div>
          </el-upload>

注意要将文件转变成需要的格式，否则前端会报错。

  // 将图片格式转换成file-list需要的格式
  computed: {
    imgFileList() {
      return this.fileList.map((imgURL, index) => {
        return {
          name: index + '.png',
          url: imgURL
        }
      })
    }
  },

几个文件改变时的方法

exceedFile(files, fileList) {
      this.fileList = fileList;
      this.$message.warning(`只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`);
    },
    // 文件状态改变时的钩子
    fileChange(file, fileList) {
      this.fileList = fileList;
      console.log(file.raw);
      this.uploadList.push(file.raw);
      console.log(this.fileList);
    },
    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUploadFile(file) {
      console.log('before upload');
      console.log(file);
      let size = file.size / 1024 / 1024;
      if (size > 1) {
        this.$message.warning('文件大小不得超过1M');
      }
    },
    // 文件上传成功时的钩子
    handleSuccess(res, file, fileList) {
      this.$message.success('文件上传成功');
    },
    // 文件上传失败时的钩子
    handleError(err, file, fileList) {
      console.log(fileList);
      console.log(this.uploadList);
      console.log(this.fileList);
      console.log('err', err)


      this.$message.error('文件上传失败');
    },

前后端接口调用anxios方法，注意在form中append是fileList[0].raw，而不是fileList[0]。

upload_img() {
      
      console.log("form:")
      console.log(this.fileList)
      if (this.fileList === 0) {
        this.$message.warning("请上传图片！")
      } else {

        let form = new FormData();
        console.log("form:")
        console.log(form)
        console.log("hid=" + this.hid)
        console.log("sid=" + this.sid)

        form.append('file', this.fileList[0].raw)
        form.append('hid', this.create_hid)
        console.log("form3:")
        console.log(form.get("file"))

        this.axios({
          method: "post",
          url: "/teacher/upload_img",
          enctype: "multipart/form-data",
          headers: {
            /*'Content-type': 'multipart/form-data',*/
            'token': localStorage.getItem("token")
          },
          data: form
        }).then(res => {
          console.log('上传成功！')
        })

      }

    },

后端controller层

@RequestMapping (value = "/teacher/upload_img",method = RequestMethod.POST)
    public Homework homework_img(@RequestParam("file") MultipartFile file, @RequestParam("hid")int hid){
        System.out.println("teacher_img");
        System.out.println(hid);

        try {
//            System.out.println("stu_img");
//            System.out.println(hid);
//            System.out.println(sid);
//
            InputStream ins = file.getInputStream();
            byte[] buffer=new byte[1024];
            int len=0;
            ByteArrayOutputStream bos=new ByteArrayOutputStream();
            while((len=ins.read(buffer))!=-1){
                bos.write(buffer,0,len);
            }
            bos.flush();
            byte data[] = bos.toByteArray();
            int result=teacherService.insertPhoto(data,hid);
            System.out.println(result);
            /*Homework homework_img=studentService.search(hid,sid);
            return homework_img;*/
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
return null
}

service层

    public int insertPhoto(byte[] data, int hid) {
        int result=teacherMapper.insertPhoto(data,hid);
        return result;
    }

mapper层

 int insertPhoto(byte[] data, int hid);

xml文件中

    <update id="insertPhoto" >
        update homework_desc set pic1=#{data} where hid=#{hid}
    </update>