Javascript 使用由于组件问题而无法工作的事件上载Vue.js图像
我正试图用这个上传图像，但不幸的是，我的Javascript 使用由于组件问题而无法工作的事件上载Vue.js图像,javascript,vue.js,Javascript,Vue.js,我正试图用这个上传图像，但不幸的是，我的uploadImageSuccess事件没有触发。如果错了，真的很抱歉，因为我是Vue.js的新手 这是我的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>vue-upload-multiple-image</title> </hea
uploadImageSuccess<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue-upload-multiple-image</title>
</head>
<body>
<div id="el">
<div id="my-strictly-unique-vue-upload-multiple-image" style="display: flex; justify-content: center;">
<vue-upload-multiple-image
@upload-success="uploadImageSuccess"
@before-remove="beforeRemove"
@edit-image="editImage"
@data-change="dataChange"
:data-images="images"
></vue-upload-multiple-image>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://unpkg.com/vue-upload-multiple-image@1.0.2/dist/vue-upload-multiple-image.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#el',
data() {
return {
images: []
}
},
components: {
VueUploadMultipleImage
},
methods: {
uploadImageSuccess(formData, index, fileList) {
alert('dd');
console.log('data', formData, index, fileList)
// Upload image api
// axios.post('http://your-url-upload', { data: formData }).then(response => {
// console.log(response)
// })
},
beforeRemove(index, done, fileList) {
console.log('index', index, fileList)
var r = confirm("remove image")
if (r == true) {
done()
} else {
}
},
editImage(formData, index, fileList) {
console.log('edit data', formData, index, fileList)
},
dataChange(data) {
console.log(data)
}
}
});
</script>
</body>
</html>
vue上载多个图像
var vm=新的Vue({
el:“#el”，
数据（）{
返回{
图片：[]
}
},
组成部分：{
VueuplodMultipleImage
},
方法：{
uploadImageSuccess（表单数据、索引、文件列表）{
警报（“dd”）；
log（'data'，formData，index，fileList）
//上传图像api
//轴心柱http://your-url-upload“，{data:formData}）。然后（响应=>{
//console.log（响应）
// })
},
删除之前（索引、完成、文件列表）{
console.log（'index'，index，fileList）
var r=确认（“删除图像”）
如果（r==true）{
完成（）
}否则{
}
},
editImage（表单数据、索引、文件列表）{
log（'edit data'，formData，index，fileList）
},
数据更改（数据）{
console.log（数据）
}
}
});
您正在使用CDN站点导入插件（即：
https://unpkg.com/vue-upload-multiple-image@1.0.2/dist/vue上载多个image.jsVueUploadMultipleImage components: {
VueUploadMultipleImage
},
ReferenceError为了完整起见，请注意，只有通过NPM使用插件时，才需要上述代码段。在这种情况下，您应该首先导入插件：
import VueUploadMultipleImage from 'vue-upload-multiple-image'
components: {
VueUploadMultipleImage,
},