bootstrap-vue 如何将 FileReader 转换为 blob 并上传到服务器？

Question

在@vue/cli 4.1.1 应用程序中，我使用 bootstrap-vue 和 b-form-file 组件进行图片上传

https://bootstrap-vue.js.org/docs/components/form-file/#multiple-files

定义为：

<b-form-file
    id="upload_ad_image"
    v-model="new_upload_ad_image"
    :state="Boolean(new_upload_ad_image)"
    placeholder="Choose a file or drop it here..."
    drop-placeholder="Drop file here..."
    accept="image/jpeg, image/png, image/gif"
></b-form-file>

<div ref="uploaded_img_preview" id="uploaded_img_preview" class="m-2" >Uploaded image preview :</div>

我找到了片段 https://codepen.io/Tenderfeel/pen/rgqWXR 并使用它在我的表单上显示选定的文件以供预览。接下来我需要将它上传到服务器上。我有使用如下代码将图像上传为博客的经验：

fetch(this.taskRow.imageFile.blob).then(function (response) {
    if (response.ok) {
        return response.blob().then(function (imageBlob) {
            let imageUploadData = new FormData()
            imageUploadData.append('id', self.taskRow.id)
            imageUploadData.append('image', imageBlob)
            imageUploadData.append('image_filename', self.taskRow.imageFile.name)

但我需要将上传图片转换为 blob。选择图像时我使用方法：但是出现错误：观察者 "new_upload_ad_image" 的回调错误：“InvalidStateError：无法在 'FileReader' 上执行 'readAsDataURL'：对象已经忙于读取 Blob

watch: {
    new_upload_ad_image(val) {
        if (!val) return;
        if (this.previewImg) {
            this.previewImg.remove();
        }
        const img = document.createElement("img");
        img.classList.add("obj");
        img.file = this.new_upload_ad_image;
        console.log('img.file::')
        console.log(img.file)

        this.previewImg = img;
        console.log('this.$refs.uploaded_img_preview::')
        console.log(this.$refs.uploaded_img_preview)

        console.log('img::')
        console.log(img)

        this.$refs.uploaded_img_preview.appendChild(img);

        const fileReader = new FileReader();
        fileReader.onload = (e) => {
            this.previewImg.src = e.target.result;
        };
        fileReader.readAsDataURL(this.new_upload_ad_image);
        console.log('fileReader::')
        console.log(fileReader)

        let blobObj= fileReader.readAsDataURL(img.file) // RAISE ERROR :

        console.log('blobObj::')
        console.log(blobObj)

    }
},

我在控制台中看到的内容：https://imgur.com/a/2EZxq9C

如何获取blob并将其上传到服务器？

修改后的块：

定义了 id="upload_ad_image" 的文件输入：

<b-form-file
    id="upload_ad_image"
    v-model="new_upload_ad_image"
    :state="Boolean(new_upload_ad_image)"
    placeholder="Choose a file or drop it here..."
    drop-placeholder="Drop file here..."
    accept="image/jpeg, image/png, image/gif"
></b-form-file>

我运行获取并查看图像 blob 无效并创建了文件，但它无效我有：

var self = this
const upload_ad_image = document.getElementById('upload_ad_image')
console.log('upload_ad_image::')
console.log(upload_ad_image)
console.log('upload_ad_image.files::')
console.log(upload_ad_image.files[0])

if (typeof upload_ad_image.files[0] == 'undefined') {
    self.showPopupMessage('Ad image upload', 'Invalid image !', 'warn')
    return
}
fetch(upload_ad_image.files[0].blob).then(function (response) {
    if (response.ok) {
        return response.blob().then(function (imageBlob) {
            console.log('imageBlob::')
            console.log(imageBlob) // Looks like this var has invalid content(printscreen below)!

            let imageUploadData = new FormData()
            imageUploadData.append('ad_id', self.editableAd.id)
            imageUploadData.append('main', self.new_upload_ad_image_main)
            imageUploadData.append('info', self.new_upload_ad_image_info)
            imageUploadData.append('image', imageBlob)
            imageUploadData.append('image_filename', upload_ad_image.files[0].name)

我在控制台中看到：https://imgur.com/a/4ees55C

出了什么问题，如何解决？

"bootstrap-vue": "^2.3.0",
"vue": "^2.6.11",

谢谢！

Answer 1

File objects do inherit from the Blob界面。

你可以用 Blob 做的所有事情，你也可以用 File 做，所以在你的代码中你可以直接将 this.new_upload_ad_image 附加到你的 FormData。

const inp = document.getElementById('inp');
inp.onchange = (evt) => {
  const formData = new FormData();
  formData.append( 'my-file', inp.files[0], 'file.ext' );
  //  check it's correctly in the FormData
  console.log( [...formData.entries()] );
};

<input type="file" id="inp">

bootstrap-vue 如何将 FileReader 转换为 blob 并上传到服务器？

How in bootstrap-vue convert FileReader to blob and upload to server?

blob

filereader

bootstrap-vue