提交

src/view/fenghui/index.vue

@@ -45,11 +45,9 @@
                     <van-field label-width="7em" :placeholder="lang[langType].photoContent"
                         :label="lang[langType].photo">
                         <template #input>
-                            <van-uploader accept="image/*" v-model="from.photo" :max-count="1" :max-size="524288000"
-                                @oversize="filesize" :after-read="beforeRead" result-type="file">
-                                <template #preview-cover>
-                                    <van-icon color="#000" size="40" @click="previewClick" name="play-circle-o play" />
-                                </template>
+                            <van-uploader :preview-options="{ closeable: true }" accept="image/*" v-model="photo"
+                                :max-count="1" :max-size="524288000" @oversize="filesize" :after-read="beforeRead"
+                                result-type="file">
                             </van-uploader>
                             <p style="font-size: 12px;" v-text="lang[langType].photoSubContent"> </p>
                         </template>
@@ -65,7 +63,8 @@
                     </van-popup>
                     <br />
                     <h4 class="title" v-text="lang[langType].orther"></h4>
-                    <van-field label-width="7em" v-model="from.message" rows="3" autosize :label="lang[langType].ortherNotes" type="textarea"
+                    <van-field label-width="7em" v-model="from.message" rows="3" autosize
+                        :label="lang[langType].ortherNotes" type="textarea"
                         :placeholder="lang[langType].ortherNotesContent" />
                 </van-cell-group>
             </div>
@@ -103,12 +102,12 @@ const langObjT = {
 
 const lang = ref(langpkg);
 const langType = ref(localStorage.getItem('langType') || 'zh');
-const preview = ref('');
 const showLange = ref(false);
 const showCardType = ref(false);
 const cardTypeList = ref([])
+const photo = ref([])
 const isFile = () => {
-    return from.photo && from.photo.length;
+    return photo.value && photo.value.length;
 };
 const langChange = ({ selectedValues }) => {
     langType.value = selectedValues[0];
@@ -124,7 +123,7 @@ const from = reactive({
     company: '',
     career: '',
     contact: '',
-    photoUrl: '',
+    photoUrl: [],
     cardType: [],
     photo: [],
     message: ''
@@ -142,22 +141,6 @@ getJoinType().then((res) => {
 })
 
 const filesize = () => showToast(lang.value[langType.value].fileSize);
-const previewClick = () => {
-    let getUrl = null;
-    const file = from.photo[0].file;
-    if (window.createObjectURL != undefined) {
-        //basic
-        getUrl = window.createObjectURL(file);
-    } else if (window.URL != undefined) {
-        //window.URL 标准定义
-        getUrl = window.URL.createObjectURL(file);
-    } else if (window.webkitURL != undefined) {
-        //window.webkitURL是webkit的内核
-        //webkit or chrome
-        getUrl = window.webkitURL.createObjectURL(file);
-    }
-    preview.value = getUrl;
-};
 
 // 选择证件类型
 const onConfirm = ({ selectedValues, selectedOptions }) => {
@@ -168,8 +151,9 @@ const onConfirm = ({ selectedValues, selectedOptions }) => {
 
 const beforeRead = () => {
     if (!isFile) showToast(lang.value[langType.value].changePhono);
+    const item = photo.value[0]
     const oriData = new FormData();
-    oriData.append('file', from.photo[0].file);
+    oriData.append('file', item.file);
     axios({
         method: 'post',
         url: config.base.Url2025 + 'dev/file/uploadDynamicReturnUrl',
@@ -181,11 +165,17 @@ const beforeRead = () => {
         .then(res => {
             if (res.status !== 200 || res.data.code !== 0) {
                 showToast(lang.value[langType.value].upFileError);
-                from.photoUrl = ''
+                from.photoUrl = []
                 return
             }
             showToast(lang.value[langType.value].upFileSusscess);
-            from.photoUrl = res.data.data
+            from.photoUrl = [{ url: res.data.data }]
+            photo.value = [
+                {
+                    url: res.data.data,
+                    file: item.file,
+                }
+            ]
         })
     return true;
 };
@@ -195,7 +185,7 @@ const onSubmit = () => {
     if (!isFile) showToast(lang.value[langType.value].selectFile);
     saveData({
         "name": from.name,
-        "photo": from.photoUrl,
+        "photo": from.photoUrl[0].url,
         "nationality": from.nationality,
         "passportOrId": from.idCard,
         "contact": from.contact,
@@ -211,10 +201,10 @@ const onSubmit = () => {
         from.nationality = '';
         from.company = '';
         from.career = '';
-        from.photoUrl = ''
+        from.photoUrl = []
         from.contact = '';
         from.cardType = [];
-        from.photo = [];
+        photo.value = [];
         from.message = '';
     }).catch(() => {
         showToast(lang.value[langType.value].registrationError);
@@ -277,8 +267,11 @@ const onSubmit = () => {
         color: #031280;
     }
 
-    .van-uploader__preview-cover {
-        background-color: #000;
+    .icon {
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
     }
 
     .btn_bottom {