图片无法通过带有FormData的API传递

时间:2019-04-03 11:05:27

标签: javascript vue.js

我无法使用formData上传文件图像。 我已经尝试过该主题,但无法解决我的问题

How To Use FormData() For Uploading File In Vue

但是当我使用控制台日志时,我已经使用此代码获取了图像文件数据

methods: {
      onPickFile() {
        this.$refs.image.click()
      },
      onFilePicked(e) {
        const files = e.target.files;
        console.log(files);
        // for( var i = 0; i < files.length; i++ ){
          if (files[0] !== undefined) {
            this.imageName = files[0].name;
            if (this.imageName.lastIndexOf(".") <= 0) {
              return;
            }
            const fr = new FileReader();
            fr.readAsDataURL(files[0]);
            fr.addEventListener("load", () => {
              this.imageUrl = fr.result;
              this.imageFile = files[0]; // this is an image file that can be sent to server...
              console.log(this.imageUrl);
              console.log(this.imageFile);
            });
          } else {
            this.imageName = "";
            this.imageFile = "";
            this.imageUrl = "";
          }

这是将图片文件解析为api的代码

console.log(this.imageFile)
let formData = new FormData()
            formData.append('fotoCampaign', this.imageFile) 
            for(var pair of formData.entries()) {
              console.log(pair[0]+ ', '+ pair[1]); 
            }
            // console.log(formData)
            await CampaignService.uploadFoto(idCampaign, {formData}).then(res => {
              console.log(res.data)
            })

这是我的控制台

this is my console, but i got 500 internal error

有人可以帮助我解决我的问题吗?

0 个答案:

没有答案