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> |