问题遇到的现象和发生背景
写的上传vue组件为什么在app.vue里引用，功能就没问题，但在其他页面单独引用功能就有问题
问题相关代码，请勿粘贴截图
这是组件
<template>
<div>
<uploader
:options="options"
:file-status-text="statusText"
class="uploader-example"
ref="uploader"
@file-complete="fileComplete"
@complete="complete"
@file-success="fileSuccess"
>
<div class="content">
<div class="upload-list-content">
<ul>
<li class="upload-list-text">添加到文件</li>
<li>
<uploader-btn
><i class="el-icon-folder"></i>上传文件</uploader-btn
>
</li>
<li>
<uploader-btn :directory="true"
><i class="el-icon-folder"></i>上传文件夹</uploader-btn
>
</li>
<li>
<uploader-btn :directory="true"
><i class="el-icon-folder-add"></i>新建文件夹</uploader-btn
>
</li>
<li class="upload-list-text">添加到相簿</li>
<li>
<uploader-btn :attrs="attrs"
><i class="el-icon-picture-outline">上传照片/视频</uploader-btn
>
</li>
<li>
<uploader-btn :directory="true"
><i class="el-icon-picture"></i>上传照片文件夹</uploader-btn
>
</li>
</ul>
</div>
<div class="upload-list">
<div>
<li>上传开始,剩余1项</li>
<div class="upload-list-box">
<uploader-list class="uploader-list"></uploader-list>
</div>
</div>
</div>
</div>
</uploader>
</div>
</template>
<script>
export default {
data() {
return {
options: {
target: "/ffmpeg-video/upload", // '//jsonplaceholder.typicode.com/posts/',
testChunks: true, //开启分片测试，存在不上传，不存在才上传
//会在整个文件上传开始前，发送一次'/ffmpeg-video/upload'同名的get请求，并将响应体就是message，传入下面函数中
//只请求一次后端，但是下面函数是每次发送分片都自动调用一次
checkChunkUploadedByResponse: function (chunk, message) {
//每上传一个分片调用一次函数
let messageObj = JSON.parse(message);
if (messageObj.needSkiped) {
return true; //如果已经上传完成，直接跳过
} else {
//否则根据
return (
(messageObj.uploadList || []).indexOf(chunk.offset + 1 + "") >= 0
);
}
return true;
},
},
attrs: {
accept: "image/*",
},
statusText: {
success: "成功了",
error: "出错了",
uploading: "上传中",
paused: "暂停中",
waiting: "等待中",
},
};
},
methods: {
complete() {
// debugger
console.log("complete", arguments);
},
fileComplete() {
console.log("file complete", arguments);
},
fileSuccess() {
this.$axios({
method: "post",
url: "/ffmpeg-video/upload-success",
data: arguments[1], //这个是fileSuccess的回调值，可以直接拿来用
}).then(
(response) => {
console.log("fileSuccess");
},
(error) => {}
);
},
},
mounted() {
console.log(localStorage.getItem("Access-Token"));
this.$nextTick(() => {
window.uploader = this.$refs.uploader.uploader;
});
},
};
</script>
<style>
@import "@/styles/upload.css";
/* .uploader-example {
width: 880px;
padding: 15px;
margin: 40px auto 0;
font-size: 12px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.uploader-example .uploader-btn {
margin-right: 4px;
}
.uploader-example .uploader-list {
max-height: 440px;
overflow: auto;
overflow-x: hidden;
overflow-y: auto;
} */
</style>
然后在其他页面，index.vue使用，页面没问题，可以打开上传文件选择窗口，但是上传不了
<uploader ></uploader>
import uploader from "@/pages/UpLoad";
components: {
uploader,
},
