112 lines
2.4 KiB
Vue
112 lines
2.4 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<ali-oss-uploader
|
|||
|
|
:max-count="1"
|
|||
|
|
:max-size="100"
|
|||
|
|
:type="artisanType+1"
|
|||
|
|
:user-id="userId"
|
|||
|
|
:kind="2"
|
|||
|
|
:file-string="video"
|
|||
|
|
accept="video/*"
|
|||
|
|
button-text="上传视频"
|
|||
|
|
@success="onUploadSuccess"
|
|||
|
|
@error="onUploadError"
|
|||
|
|
@delete="onFileDelete"
|
|||
|
|
>
|
|||
|
|
</ali-oss-uploader>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import request from '../../utils/request'
|
|||
|
|
import AliOssUploader from '../../components/ali-oss-uploader/ali-oss-uploader.vue'
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
AliOssUploader
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
fileList: [],
|
|||
|
|
video: '',
|
|||
|
|
userId: 34,
|
|||
|
|
artisanType: 1
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
async chooseImage() {
|
|||
|
|
// all
|
|||
|
|
try {
|
|||
|
|
const files = await uni.chooseFile({
|
|||
|
|
count: 1,
|
|||
|
|
type: 'image'
|
|||
|
|
})
|
|||
|
|
console.log(files)
|
|||
|
|
let file = files.tempFiles[0];
|
|||
|
|
let filename = files.tempFiles[0].name;
|
|||
|
|
request.post('/user/getalioss',{type: 1,kind: 1})
|
|||
|
|
.then(data => {
|
|||
|
|
const formData = new FormData();
|
|||
|
|
formData.append('name',filename);
|
|||
|
|
formData.append('policy', data.policy);
|
|||
|
|
formData.append('OSSAccessKeyId', data.ossAccessKeyId);
|
|||
|
|
formData.append('success_action_status', '200');
|
|||
|
|
formData.append('signature', data.signature);
|
|||
|
|
formData.append('key', data.dir + filename);
|
|||
|
|
// file必须为最后一个表单域，除file以外的其他表单域无顺序要求。
|
|||
|
|
formData.append('file', file);
|
|||
|
|
fetch(data.host, { method: 'POST', body: formData},).then((res) => {
|
|||
|
|
console.log(res);
|
|||
|
|
alert('文件已上传');
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.log('Error occurred while getting OSS upload parameters:', error);
|
|||
|
|
});
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('选择文件出错:', e)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onUploadSuccess({ file, fileList }) {
|
|||
|
|
console.log('上传成功:', file)
|
|||
|
|
},
|
|||
|
|
onUploadError({ error, file }) {
|
|||
|
|
console.error('上传失败:', error)
|
|||
|
|
},
|
|||
|
|
onFileDelete({ error, file }) {
|
|||
|
|
console.error('上传失败:', error)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style>
|
|||
|
|
|
|||
|
|
.image-preview,
|
|||
|
|
.upload-btn {
|
|||
|
|
width: 200rpx;
|
|||
|
|
height: 200rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-video,
|
|||
|
|
.preview-image {
|
|||
|
|
width: 200rpx;
|
|||
|
|
height: 200rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
margin-right: 18rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.upload-btn {
|
|||
|
|
border: 2rpx dashed #DDDDDD;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plus-icon {
|
|||
|
|
font-size: 60rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|