meta大裁员vue+element+osss实现⼤⽂件切⽚上传
纯前端实现：切⽚上传断点续传。断点续传需要在切上上传的基础上实现
前端之前上传OSS，⽆需后端提供接⼝。先上完整代码，直接复制，将new OSS⾥的参数修改成⾃⼰公司OSS相关信息后可⽤，如遇问题，请继续往下看。
oss官⽅⽂档
代码允许所需环境：vue + element + ali-oss
安装ali-oss： cnpm install ali-oss
代码实现
<template>
<div class="dashboard-editor-container">
<el-upload
class="upload-demo"
action=""
ref="upload"
:file-list="fileList"
:limit="2"
:on-change="handleChange"
:on-remove="handleRemove"
:auto-upload="false"
accept=""
>
<el-button slot="trigger" size="small" type="primary">选取⽂件</el-button>
<el-button size="small" type="success" @click="submitForm">上传到服务器</el-button>
<el-button size="small" type="success" @click="resumeUpload">继续</el-button>
<el-button size="small" type="success" @click="stopUplosd">暂停</el-button>
<el-button size="small" type="success" @click="abortMultipartUpload">清除切⽚</el-button>
</el-upload>
<el-progress :percentage="percentage" :status="uploadStatus"></el-progress>
</div>
</template>
<script>
let OSS = require('ali-oss') // 引⼊ali-oss插件
const client = new OSS({
region: 'oss-cn-shanghai',//根据那你的Bucket地点来填写
accessKeyId: 'LTA*********RaXY',//⾃⼰账户的accessKeyId
accessKeySecret: 'uu1************GiS',//⾃⼰账户的accessKeySecret
bucket: 'a******o',//bucket名字
});
export default {
data () {
return {
fileList:[],
file: null,
tempCheckpoint: null, // ⽤来缓存当前切⽚内容
uploadId: '',
uploadStatus: null, // 进度条上传状态
percentage: 0, // 进度条百分⽐
uploadName: '',  //Object所在Bucket的完整路径
}
},
mounted() {
// window.addEventListener('online',  sumeUpload);
},
methods: {
/
/ 点击上传⾄服务器
submitForm(file) {
this.multipartUpload();
},
// 取消分⽚上传事件
async abortMultipartUpload() {
const name = this.uploadName; // Object所在Bucket的完整路径。
const uploadId = this.upload; // 分⽚上传uploadId。
const result = await client.abortMultipartUpload(name, uploadId);
console.log(result, '=======清除切⽚====');
},
// 暂停分⽚上传。
stopUplosd () {
let result = client.cancel();
console.log( result, '---------暂停上传-----------')
},
// 切⽚上传
async multipartUpload () {
if (!this.file) {
this.$('请选择⽂件')
return
}
this.uploadStatus = null
// console.log("this.uploadStatus",this.file, this.uploadStatus);
this.percentage = 0
try {
//object-name可以⾃定义为⽂件名（例如）或⽬录（例如abc/）的形式，实现将⽂件上传⾄当前Bucket或Bucket下的指定⽬录。        let result = await client.multipartUpload(this.file.name, this.file, {
headers: {
'Content-Disposition': 'inline',
'Content-Type': pe //注意：根据图⽚或者⽂件的后缀来设置，我试验⽤的‘.png’的图⽚，具体
为什么下⽂解释
},
progress: (p, checkpoint) => {
this.upload = checkpoint.uploadId
this.uploadName = checkpoint.name
this.percentage = p * 100
// console.log(p, checkpoint, this.percentage, '---------uploadId-----------')
// 断点记录点。浏览器重启后⽆法直接继续上传，您需要⼿动触发上传操作。
},
meta: { year: 2020, people: 'dev' },
mime: pe
});
console.log(result, this.percentage, 'result= 切⽚上传完毕=');
} catch (e) {
window.addEventListener('online',  sumeUpload) // 该监听放在断⽹的异常处理
// 捕获超时异常。
if (e.code === 'ConnectionTimeoutError') { // 请求超时异常处理
this.uploadStatus = 'exception'
console.log("TimeoutError");
// do ConnectionTimeoutError operation
}
/
/ console.log(e)
}
},
// 恢复上传。
async resumeUpload () {
if (!pCheckpoint) {
this.$('请先上传')
return
}
this.uploadStatus = null
try {
let result = await client.multipartUpload(this.file.name, this.file, {
headers: {
'Content-Disposition': 'inline',
'Content-Type': pe //注意：根据图⽚或者⽂件的后缀来设置，我试验⽤的‘.png’的图⽚，具体为什么下⽂解释
},
progress: (p, checkpoint) => {
this.percentage = p * 100
console.log(p, checkpoint, 'checkpoint----恢复上传的切⽚信息-------')
},
checkpoint: pCheckpoint,
meta: { year: 2020, people: 'dev' },
mime: pe
})
console.log(result, 'result-=-=-恢复上传完毕')
} catch (e) {
console.log(e, 'e-=-=-');
}
},
// 选择⽂件发⽣改变
handleChange(file, fileList) {
this.fileList = fileList.filter(row => row.uid == file.uid)
this.file = file.raw
// ⽂件改变时上传
// this.submitForm(file)
},
handleRemove(file, fileList) {
this.percentage = 0 //进度条置空
this.fileList = []
},
}
}
</script>
<style scoped>
</style>
如果相关依赖已经安装完毕，但是上述代码操作时仍有报错，请检查以下问题
const client = new OSS({
region: 'oss-cn-shanghai',//根据那你的Bucket地点来填写
accessKeyId: 'LT******XY',//⾃⼰账户的accessKeyId
accessKeySecret: 'uu*********GiS',//⾃⼰账户的accessKeySecret
bucket: 'a******io',//bucket名字
});
上述信息放在前端会存在安全问题，如在项⽬中使⽤尽量由后端接⼝提供。或使⽤STS临时授权。demo中没有，请⾃⾏探索。
配置项中信息可以问后端或者运维，bucket的名字必须是你OSS上存在的且你有权限访问的，不然会⼀直报Pleasr create a busket first或者⼀直报跨域
当遇到跨域时，或者遇到报报错信息中有etag时，请检查OSS配置，然后有OSS服务器权限⼈员进⾏配置：
window.addEventListener('online', sumeUpload)⽤于监听⽹络状态（断⽹状态和连⽹状态），实现断⽹后恢复⽹络⾃动上传就必须设置监听。
headers: {
'Content-Disposition': 'inline',
'Content-Type': pe //注意：根据图⽚或者⽂件的后缀来设置，我取得是⽂件的type，具体为什么下⽂解释
},
'Content-Type': pe`的作⽤：加了在⽂件上传完毕后，访问⽂件链接时可以直接查看，否则会直接下载。
⽂件上传完毕后查看，可以去questUrls中去取，但是注意要去点地址后⾯的uploadId=******
上述代码只是demo，代码以实现功能为主，并不严谨，请⾃⾏完善。如对各位有所帮助，请推荐，谢谢各位！。
以上就是全部内容，如有疑问，敬请留⾔！如有问题，请指出，谢谢~~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。