如何在 vue 组件的 link 中上传图片?
How can I upload image in a link on the vue component?
我的组件 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>
如果我点击 link 然后它会调用方法 addPhoto
我希望如果 link 单击,它会上传图像。所以它将 select 图片然后上传它并用上传的图片更新 img。
上传图片的代码似乎会放在添加照片方法中
在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>
这里有一些如何使用它的信息:
- 导入组件 -> 声明指令。
- 提供一个 -> 用于 formData 创建(是要后端的名称)。
- 向我们展示 属性
注意:如果需要在同一个页面多次打开,建议同步。检查底部的例子。 ( /!\ 同步需要 Vue 2.3 /!\ )
- 监听@files 事件以获取 selected 文件数组作为参数
- 如果您想将其用作多个文件 select,请提供 属性 为真。
- 使用 prop 过滤文件(有效接受类型:HTML Input="file" Accept Attribute File Type (CSV))。
- 设置为true时组件显示'select file'按钮(输入类型文件),否则隐藏,Js显示windows
例如:
单身select
<file-upload name="fooImport" @files="selectedFile" :show.sync="true" />
例如:
多个 select
<file-upload name="barUpload" @files="selectedFiles" :show.sync="displayUpload" accept="text/plain, .pdf" />
我的组件 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>
如果我点击 link 然后它会调用方法 addPhoto
我希望如果 link 单击,它会上传图像。所以它将 select 图片然后上传它并用上传的图片更新 img。
上传图片的代码似乎会放在添加照片方法中
在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>
这里有一些如何使用它的信息:
- 导入组件 -> 声明指令。
- 提供一个 -> 用于 formData 创建(是要后端的名称)。
- 向我们展示 属性 注意:如果需要在同一个页面多次打开,建议同步。检查底部的例子。 ( /!\ 同步需要 Vue 2.3 /!\ )
- 监听@files 事件以获取 selected 文件数组作为参数
- 如果您想将其用作多个文件 select,请提供 属性 为真。
- 使用 prop 过滤文件(有效接受类型:HTML Input="file" Accept Attribute File Type (CSV))。
- 设置为true时组件显示'select file'按钮(输入类型文件),否则隐藏,Js显示windows
例如: 单身select
<file-upload name="fooImport" @files="selectedFile" :show.sync="true" />
例如: 多个 select
<file-upload name="barUpload" @files="selectedFiles" :show.sync="displayUpload" accept="text/plain, .pdf" />