在Vue項目根據圖片url獲取file對象並用axios上傳

圖片url轉file對象

<script>
export default {
  data() {
    return {
	  ruleForm: {
        coverUrl: "",
        coverFile: ""
      },
    };
  },
  methods: {
    imgUrlToFile(url) {
      var self = this;
      var imgLink = url;
      var tempImage = new Image();
      //如果圖片url是網絡url，要加下一句代碼
      tempImage.crossOrigin = "*";
      tempImage.onload = function() {
        var base64 = self.getBase64Image(tempImage);
        var imgblob = self.base64toBlob(base64);
        var filename = self.getFileName(self.ruleForm.coverUrl);
        self.ruleForm.coverFile = self.blobToFile(imgblob, filename);
      };
      tempImage.src = imgLink;
    },
    getBase64Image(img) {
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, img.width, img.height);
      var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
      var dataURL = canvas.toDataURL("image/" + ext);
      return dataURL;
    },
    base64toBlob(base64) {
      let arr = base64.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
    blobToFile(blob, filename) {
      // edge瀏覽器不支持new File對象，所以用以下方法兼容
      blob.lastModifiedDate = new Date();
      blob.name = filename;
      return blob;
    },
    getFileName(url) {
      // 獲取到文件名
      let pos = url.lastIndexOf("/"); // 查找最後一個/的位置
      return url.substring(pos + 1); // 截取最後一個/位置到字符長度，也就是截取文件名
    }
  }
};
</script>

axios上傳

注意，用以上方法得到file的對象在上傳時，還必須在表單的append方法中增加文件名，否則後端收到的只是blob對象，而不是文件，如下：

submitForm() {
    //...
	var filename = this.getFileName(this.ruleForm.coverUrl);
	params.append(
	  "course_cover",
	  this.ruleForm.coverFile,
	  filename
	);
	//....
}