Javascript 使用vuejs发送照片

我正在使用，我需要将我的文件和其他表单数据一起发送，但它似乎无法将照片的正确详细信息发送到后端：

截图

选择图像时的控制台日志

发送到后端的数据

代码

照片输入

<el-upload
    action="#"
    :limit="1"
    :multiple="false"
    :on-change="photoChanged"
    :on-exceed="handleExceed"
    list-type="picture-card"
    :on-remove="handleRemove"
    :on-preview="handlePictureCardPreview"
    :before-remove="beforeRemove"
    :auto-upload="false">
    <i slot="default" class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>

---

有什么想法吗？

将文件转换为base64

选择图像时，请使用下面的代码

       onImageChange() {
          let file = this.form.photo

          if (file == '')
                return;

           this.createImage(file);
       }

       createImage(file) {
           let reader = new FileReader();
           let el = this
           reader.onload = (e) => {
                el.form.photo = e.target.files[0];      
           };
           reader.readAsDataURL(file);
       },

---

在输入文件中附加onImageChange功能

我已使用FormData将照片或文档发送到服务器。

输入名称：
输入帐号：
上载文件：
导出默认值{
数据（）{
返回{
图像数据：{}
}
},
方法：{
上传ImageToServer（）{
//1.保存表单数据并返回新id以保存图像
axios.post（'/api/admin/products/store'，this.imageData）
。然后（res=>{
if（res.id）{
//2.将图像保存到id
设formData=new formData（）；
让file=document.getElementById（'userfile'）；
formData.append（'file'，file）
post（'/api/admin/products/image/{id}'，formData）
。然后（res=>{
console.log（res）
})
}
})
.catch（错误=>{
console.log（错误）
}) 
}
}
}

这里,， 表单数据和文件数据不能在一次请求中发送。 1.保存表单数据并返回id。 2.将图像数据保存到id。 将html替换为“元素ui”语法。确保rest api接收表单数据作为输入。

我已经决定放弃将包含其余数据的图像发送到后端，首先在输入中使用

action=“#”

上传图像，作为回报，我在表单中获得文件名，然后只将文件名与表单的其余部分一起发送，而不是发送图像文件

<el-upload
  action="/api/upload"
  :on-success="handleAvatarSuccess"
.....>


methods: {
  handleAvatarSuccess(res, file) {
    this.form.photo = res.data;
  },
}

方法：{
handleAvatarSuccess（资源、文件）{
this.form.photo=res.data；
},
}

因此，一旦选择了我的文件，它就会将其发送到后端，并在我的

表单.photo

中设置存储文件的名称，该名称将与表单的其余输入一起发送

---

希望对其他人也有用。

将您的文件转换为base64，就这样。@Qonvex620如何做？当我选择文件时，它在v-on处理程序中返回

错误：“TypeError:未能在'FileReader'上执行'readAsDataURL'：参数1不是'Blob'类型。”

仍然

v-on处理程序中的错误：TypeError:未能对“FileReader”执行“readAsDataURL”：参数1不是“Blob”类型。“

你如何在onImageChange函数中传递文件？可能你没有传递文件基本上我只使用你的

createImage

函数并将名称更改为

photoChanged

，因为我的

photoChanged

处于更改方法

：on change=“photoChanged”

因此文件确实存在，但我们无法使用

fileReader（）

photoChanged（文件）{let reader=new fileReader（）；reader.onload=（e）=>{this.form.photo=e.target.files[0]；}；reader.readAsDataURL（文件）；}，

是的，但问题在于

el upload>

标记处理图像数据的方式，否则就不是问题，formData也可以正常工作。

  <form id="myForm" name="myForm">
    <div>
        <label for="username">Enter name:</label>
        <input type="text" id="username" name="username" v-model="imageData.name">
      </div>
     <div>
        <label for="useracc">Enter account number:</label>
        <input type="text" id="useracc" name="useracc" v-model="imageData.account">
      </div>
    <label for="userfile">Upload file:</label>
    <input type="file" id="userfile" name="userfile">
  </div>
  <input type="submit" value="Submit!">
</form>

export default {
    data() {
        return { 
            imageData: {}
        }
    },
    methods: {
        uploadImageToServer() {
            // 1.Save the form Data and return the new id to save the image 
            axios.post('/api/admin/products/store', this.imageData)
            .then(res => {
                if(res.id) {
                //2. Save the image to id
                let formData = new FormData();
                let file = document.getElementById('userfile');
                formData.append('file', file)
                axios.post('/api/admin/products/image/{id}', formData)
                    .then(res => {
                        console.log(res)
                    })
                }
            })
            .catch(err => {
                console.log(err)
            }) 

        }
    }
}

<el-upload
  action="/api/upload"
  :on-success="handleAvatarSuccess"
.....>


methods: {
  handleAvatarSuccess(res, file) {
    this.form.photo = res.data;
  },
}