Vue.js 如何在vue组件上的链接中上载图像？

我的组件vue如下所示：

<template>
    <div>
        <ul class="list-inline list-photo">
            <li v-for="item in items">
                <div class="thumbnail" v-if="clicked[item]">
                    <img src="https://myshop.co.id/img/no-image.jpg" alt="">
                    <a href="javascript:;" class="thumbnail-check"><span class="fa fa-check-circle"></span></a>
                </div>
                <a v-else href="javascript:;" class="thumbnail thumbnail-upload"
                   title="Add Image" @click="addPhoto(item)">
                    <span class="fa fa-plus fa-2x"></span>
                </a>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        props: ['state', 'product'],
        data() {
                return {
                    items: [1, 2, 3, 4, 5],
                    clicked: [] // using an array because your items are numeric
                }
            }
        },
        methods: {
            addPhoto(item) {
                this.$set(this.clicked, item, true)
            }
        }
    }
</script>

导出默认值{
道具：[“状态”，“产品”]，
数据（）{
返回{
项目：[1,2,3,4,5]，
单击：[]//使用数组，因为您的项是数字
}
}
},
方法：{
添加照片（项目）{
this.$set（this.clicked，item，true）
}
}
}

如果我点击一个链接，它将调用addPhoto方法

我想如果a链接点击，它将上传图像。因此，它将选择图像，然后将其上载，并使用上载的图像更新img

看起来上传图片的代码将放在addphoto方法中

我仍然对在vue组件中上传图像感到困惑

---

如何解决此问题？

您可以对文件选择器使用如下组件：

<template>
  <input v-show="showNative" type="file" :name="name" @change="onFileChanged" :multiple="multiple" :accept="accept"/>
</template>

<script>

export default {
  props: {
    name: { type: String, required: true },
    show: { type: Boolean, Default: false },
    multiple: { type: Boolean, default: false },
    accept: { type: String, default: "" },
    showNative: { type: Boolean, default: false }
  },
  watch: {
    show(value) {
      if (value) {
        // Resets the file to let <onChange> event to work.
        this.$el.value = "";

        // Opens select file system dialog.
        this.$el.click();

        // Resets the show property (sync technique), in order to let the user to reopen the dialog.
        this.$emit('update:show', false);
      }
    }
  },
  methods: {
    onFileChanged(event) {
      var files = event.target.files || event.dataTransfer.files;
      if (!files.length) {
        return;
      }

      var formData = new FormData();

      // Maps the provided name to files.
      formData.append(this.name, this.multiple ? files : files[0]);

      // Returns formData (which can be sent to the backend) and optional, the selected files (parent component may need some information about files).
      this.$emit("files", formData, files);
    }
  }
}
</script>

导出默认值{
道具：{
名称：{type:String，必需：true}，
显示：{type:Boolean，默认值：false}，
多个：{type:Boolean，默认值：false}，
接受：{type:String，默认值：}，
showNative:{type:Boolean，默认值：false}
},
观察：{
显示（值）{
如果（值）{
//重置文件以使事件正常工作。
这。$el.value=“”；
//打开“选择文件系统”对话框。
这是。$el.click（）；
//重置show属性（同步技术），以便用户重新打开对话框。
这是$emit（'update:show'，false）；
}
}
},
方法：{
onFileChanged（事件）{
var files=event.target.files | | event.dataTransfer.files；
如果（！files.length）{
回来
}
var formData=new formData（）；
//将提供的名称映射到文件。
formData.append（this.name，this.multiple？files:files[0]）；
//返回formData（可以发送到后端）和可选的选定文件（父组件可能需要一些有关文件的信息）。
此.$emit（“文件”、表单数据、文件）；
}
}
}

下面是一些如何使用它的信息：

• 导入组件->声明指令
• 提供一个->用于formData创建（是要发送到后端的名称）
• 将其显示给我们属性 注意：如果需要在同一页面中多次打开，建议同步。检查下面的示例。（/！\Vue 2.3需要同步/！\）
• 侦听@files事件以获取所选文件的数组作为参数
• 如果要将其用作多文件选择，请将该属性设置为true
• 使用prop筛选文件（有效的接受类型：）
• 当设置为true时，组件将显示“选择文件”按钮（输入类型文件），否则它将隐藏，窗口由Js显示

例： 单选

<file-upload name="fooImport" @files="selectedFile" :show.sync="true" />

例： 多选

<file-upload name="barUpload" @files="selectedFiles" :show.sync="displayUpload" accept="text/plain, .pdf" />