|
|
@@ -20,18 +20,10 @@
|
|
|
|
|
|
<!-- 操作按钮区域 -->
|
|
|
<div class="upload-area">
|
|
|
- <!-- 拍照按钮 -->
|
|
|
- <!-- <button class="photo-btn" @click="takePhoto" v-if="isMobile">
|
|
|
- <span class="plus-icon">+</span>
|
|
|
- <span>{{ lang.ssTakePhoto }}</span>
|
|
|
- </button> -->
|
|
|
-
|
|
|
- <button class="photo-btn" @click="uploadImage">
|
|
|
+ <button class="photo-btn" @click="uploadImage" v-loading="uploadLoading">
|
|
|
<span class="plus-icon">+</span>
|
|
|
<span>{{ lang.ssTakePhoto }}</span>
|
|
|
</button>
|
|
|
- <!-- 上传图片按钮 -->
|
|
|
- <!-- <span class="upload-btn" @click="uploadImage">{{ lang.ssContinueAddImage }}</span> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -53,7 +45,8 @@ export default {
|
|
|
fileList: []
|
|
|
},
|
|
|
recordObj: {},
|
|
|
- isMobile: false
|
|
|
+ isMobile: false,
|
|
|
+ uploadLoading: false
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -84,16 +77,14 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- // 更新作业
|
|
|
changeWorkData(newValue) {
|
|
|
this.$emit("changeWorkData", JSON.stringify(newValue));
|
|
|
},
|
|
|
- // 拍照功能
|
|
|
takePhoto() {
|
|
|
const input = document.createElement('input');
|
|
|
input.type = 'file';
|
|
|
input.accept = 'image/*';
|
|
|
- input.capture = 'environment'; // 使用后置摄像头
|
|
|
+ input.capture = 'environment';
|
|
|
input.click();
|
|
|
input.onchange = (e) => {
|
|
|
if (e.target.files[0]) {
|
|
|
@@ -105,23 +96,32 @@ export default {
|
|
|
}
|
|
|
};
|
|
|
},
|
|
|
- // 上传图片功能
|
|
|
uploadImage() {
|
|
|
+ if(this.uploadLoading){
|
|
|
+ return
|
|
|
+ }
|
|
|
const input = document.createElement('input');
|
|
|
input.type = 'file';
|
|
|
input.accept = 'image/*';
|
|
|
+ input.multiple = true;
|
|
|
input.click();
|
|
|
input.onchange = (e) => {
|
|
|
- if (e.target.files[0]) {
|
|
|
- uploadOneFile(e.target.files[0]).then(res => {
|
|
|
- res.src = res.url;
|
|
|
- this.work.fileList = [...this.work.fileList, res];
|
|
|
+ const files = e.target.files;
|
|
|
+ if (files && files.length > 0) {
|
|
|
+ this.uploadLoading = true;
|
|
|
+ const uploadPromises = [];
|
|
|
+ for (let i = 0; i < files.length; i++) {
|
|
|
+ uploadPromises.push(uploadOneFile(files[i]));
|
|
|
+ }
|
|
|
+ Promise.all(uploadPromises).then(results => {
|
|
|
+ const newImages = results.map(res => ({ ...res, src: res.url }));
|
|
|
+ this.work.fileList = [...this.work.fileList, ...newImages];
|
|
|
+ this.uploadLoading = false;
|
|
|
this.changeWorkData(this.work);
|
|
|
});
|
|
|
}
|
|
|
};
|
|
|
},
|
|
|
- // 删除图片
|
|
|
delImage(index) {
|
|
|
this.work.fileList.splice(index, 1);
|
|
|
this.changeWorkData(this.work);
|
|
|
@@ -160,7 +160,6 @@ export default {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
.qaa_img {
|
|
|
width: 100%;
|
|
|
height: auto;
|
|
|
@@ -215,7 +214,7 @@ export default {
|
|
|
.delete-text {
|
|
|
margin-top: 8px;
|
|
|
color: #FF2525;
|
|
|
- font-size: .9rem;
|
|
|
+ font-size: .9rem;
|
|
|
}
|
|
|
|
|
|
.upload-area {
|
|
|
@@ -261,4 +260,4 @@ export default {
|
|
|
.upload-btn:hover {
|
|
|
color: #85CE61;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
SanHQin