|
|
@@ -0,0 +1,142 @@
|
|
|
+<template>
|
|
|
+ <view class="upload-btn" @click="showActionSheet">
|
|
|
+ <text>+</text>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <viwe v-if="bottomText" class="bottom-text">
|
|
|
+ {{bottomText}}
|
|
|
+ </viwe>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getAliyunPolicy
|
|
|
+ } from "@/api/jiazheng.js"
|
|
|
+ export default {
|
|
|
+ props: {
|
|
|
+ bottomText: { // 试题序号
|
|
|
+ type: String
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ showActionSheet() {
|
|
|
+ uni.showActionSheet({
|
|
|
+ itemList: ['拍照', '从相册选择'],
|
|
|
+ success: (res) => {
|
|
|
+ if (res.tapIndex === 0) {
|
|
|
+ this.chooseImage('camera');
|
|
|
+ } else if (res.tapIndex === 1) {
|
|
|
+ this.chooseImage('album');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ chooseImage(sourceType) {
|
|
|
+ uni.chooseImage({
|
|
|
+ count: 1, // 只能选择一张图片
|
|
|
+ sourceType: [sourceType], // 'camera' 或 'album'
|
|
|
+ success: (res) => {
|
|
|
+ const filePath = res.tempFilePaths[0];
|
|
|
+ this.uploadFileToAliyun(filePath);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ uploadFileToAliyun(filePath) {
|
|
|
+ console.log('filePath', filePath);
|
|
|
+ const loading = uni.showLoading({
|
|
|
+ title: '上传中...',
|
|
|
+ mask: true
|
|
|
+ });
|
|
|
+
|
|
|
+ try {
|
|
|
+ const suffix = filePath.split('.').pop();
|
|
|
+ let req = {
|
|
|
+ prefix: 'resource/',
|
|
|
+ suffix: suffix
|
|
|
+ }
|
|
|
+
|
|
|
+ getAliyunPolicy(req).then(res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ const policyData = res.data;
|
|
|
+ console.log('policyData', policyData);
|
|
|
+ const formData = {
|
|
|
+ key: policyData.key,
|
|
|
+ policy: policyData.policy,
|
|
|
+ OSSAccessKeyId: policyData.accessid,
|
|
|
+ signature: policyData.signature,
|
|
|
+ success_action_status: '200',
|
|
|
+ file: {
|
|
|
+ name: policyData.key,
|
|
|
+ uri: filePath
|
|
|
+ }
|
|
|
+ };
|
|
|
+ uni.uploadFile({
|
|
|
+ url: policyData.uploadUrl,
|
|
|
+ filePath: filePath,
|
|
|
+ name: 'file',
|
|
|
+ formData: formData,
|
|
|
+ header: {
|
|
|
+ 'Content-Type': 'multipart/form-data'
|
|
|
+ },
|
|
|
+ success(uploadRes) {
|
|
|
+ console.log('uploadRes', uploadRes);
|
|
|
+ if (uploadRes.statusCode === 200) {
|
|
|
+ const imageUrl = `${policyData.downloadUrl}/${policyData.key}`;
|
|
|
+ uni.showToast({
|
|
|
+ title: '上传成功',
|
|
|
+ icon: 'success'
|
|
|
+ });
|
|
|
+ console.log('imageUrl', imageUrl);
|
|
|
+ //this.$emit('getFileUrl', imageUrl);
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '上传失败',
|
|
|
+ });
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail(err) {
|
|
|
+ console.log('err', err);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '获取凭证失败',
|
|
|
+ });
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } catch (error) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '上传失败',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ console.error('上传失败:', error);
|
|
|
+ } finally {
|
|
|
+ uni.hideLoading();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+ .upload-btn {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ border: 1px dashed #ccc;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #ccc;
|
|
|
+ margin: 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-text {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #bdbdbd;
|
|
|
+
|
|
|
+ }
|
|
|
+</style>
|
wangguoyu