vue上传
时间：2021-07-19 16:58:35
收藏：0
阅读：0
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png"> -->
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
<!-- <el-upload style="margin-left:50%;transform:translateX(-74px)"
action="#"
:http-request="uploadImg"
:limit=‘1‘
list-type="picture-card"
>
<span id="text" @click="uploadImg">点击上传封面</span>
</el-upload> -->
<el-upload
action="#"
:limit="limitNum"
:auto-upload="true"
:before-upload="handleBeforeUpload"
>
<el-button
icon="iconfont icon-play-circle"
class="upload-excel"
type="button"
>
本地导入启动
</el-button>
</el-upload>
</div>
</template>
<script>
// import HelloWorld from ‘./components/HelloWorld.vue‘
import COS from "cos-nodejs-sdk-v5"
export default {
name: ‘App‘,
components: {
// HelloWorld
},
data () {
return {
expiredTime: 0,
expiration: "",
credentials: {sessionToken:"",tmpSecretId:"",tmpSecretKey:""},
requestId:"",
startTime:0
}
},
methods: {
// 封面上传
async uploadImg () {
// 创建COS实例 获取签名
//这里写你们后端提供的请求接口即可
const res = await this.$axios.get(‘http://127.0.0.1:8000/sts‘)
console.log("credentials----",data);
// console.log(JSON.parse(res.data.data))
//这里是因为我们后端返回的是一组JSON字符串，所以进行了一次转化，如果你们直接返回的就是json对象，直接忽略即可
const data = JSON.parse(res)
const cos = new COS({
// 必选参数
getAuthorization: (options, callback) => {
const obj = {
TmpSecretId: data.credentials.tmpSecretId,
TmpSecretKey: data.credentials.tmpSecretKey,
XCosSecurityToken: data.credentials.sessionToken,
StartTime: data.startTime, // 时间戳，单位秒，如：1580000000
ExpiredTime: data.expiredTime // 时间戳，单位秒，如：1580000900
}
callback(obj)
}
})
// 上传图片 其中Bucket 和 Region找你们负责人拿
//key 在前面加上路径写法可以生成文件夹
cos.putObject({
Bucket: ‘srcb-test-1304747370‘, /* 必须 */
Region: ‘ap-shanghai‘, /* 存储桶所在地域，必须字段 */
Key: ‘/excel/‘ + new Date().getTime() + this.fileName, /* 必须 */
StorageClass: ‘STANDARD‘,
Body: this.imgFile.raw, // 上传文件对象
onProgress: progressData => {
console.log(JSON.stringify(progressData))
}
}, (err, data) => {
// 将上传后的封面进行路径拼接保存到本地
console.log(err || data)
const url = ‘https://‘ + data.Location
// console.log(url)
this.imgURL = url
})
},
submitUpload() {
this.$refs.upload.submit();
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleBeforeUpload (file) {
const splitName = file.name.split(‘.‘);
const maxSize = file.size / 1024 / 1024 < 5;
if (splitName[splitName.length - 1] !== ‘xls‘ && splitName[splitName.length - 1] !== ‘xlsx‘) {
this.$message.warning(‘上传文件只能是 xls、xlsx格式!‘);
return;
}
if (!maxSize) {
this.$message.warning(‘上传文件大小不能超过 5MB!‘);
}
setTimeout(() => {
this.uploadExcel(file);
}, 500);
return false;// 返回false不会自动上传
},
async uploadExcel (file) {
let fileFormData = new FormData();
//input_excel是键,后台要求的字段，file是值，就是要传的文件
fileFormData.append(‘input_excel‘, file); //打印这里是空的不要慌就是正确的
console.log("send file")
const resp = await this.$axios.post(‘api/offline-task-from-excel‘,fileFormData);
if(resp.status===‘success‘){
this.$message.success(resp.message);
}
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
评论（0）