vue上传

<template> <div id="app"> <!-- <img alt="Vue logo" src="./assets/logo.png"> --> <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> --> <!-- <el-upload @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>