修复上传图片预览，图片缩放的问题

Tevin

2022-09-23 9fd5c7103798b275e151260b82cae796f8d426a6

 forms/imagePicker/CImagePicker.vue

@@ -25,6 +25,7 @@
            :onImageClick="(index, file)=>handleImgView(index,file)"
        />
        <CImageCompressor ref="compressor" />
        <CImagePreview ref="imgPreview" />
    </view>
</template>

@@ -36,12 +37,14 @@
import { $fetchCommon } from '@fetchers/FCommon';
import { Tools } from '@components/common/Tools';
import CImageCompressor from './CImageCompressor.vue';
import CImagePreview from './CImagePreview.vue';
import './cImagePicker.scss';

export default {
    name: 'CImagePicker',
    components: {
        CImageCompressor,
        CImagePreview,
        AtInput,
        AtImagePicker,
        AtCurtain,
@@ -158,7 +161,8 @@
            const urls = this.files
                .map(file => (file.type === 'btn' ? false : file.url))
                .filter(Boolean);
            Taro.previewImage({
            // 图片预览，支持H5模式下的双指缩放
            this.$refs.imgPreview.$preview({
                current: file.url, // 当前显示图片的http链接
                urls, // 需要预览的图片http链接列表
            });
@@ -211,6 +215,9 @@
    },
};

// 图片上传节流
const _readyUpload = {};

export const uploadImage = (files, callback) => {
    if (!files || files.length === 0) {
        callback('success', []);
@@ -229,7 +236,7 @@
            file.url.indexOf('wxfile') >= 0 ||
            file.url.indexOf('http://tmp/') >= 0
        ) {
            let header = {};
            const header = {};
            if (process.env.TARO_ENV === 'weapp') {
                const localCookies = JSON.parse(Taro.getStorageSync('cookies') || '{}');
                const cookiesArr = [];
@@ -238,13 +245,22 @@
                });
                header['Cookie'] = cookiesArr.join('; ');
            }
            const requestFile = {
                url,
                filePath: file.url,
                fileName: file.fileName || '',
            };
            uploadTeam.push(
                new Promise((resolve, reject) => {
                    // 如果本次已上传过，直接返回地址
                    if (_readyUpload[file.url] && _readyUpload[file.url].length > 5) {
                        resolve(_readyUpload[file.url]);
                        return;
                    }
                    // 上传
                    Taro.uploadFile({
                        url,
                        ...requestFile,
                        header,
                        filePath: file.url,
                        fileName: file.fileName || '',
                        name: 'file',
                        formData: {},
                        success(res) {
@@ -252,22 +268,35 @@
                                typeof res.data === 'string'
                                    ? JSON.parse(res.data)
                                    : res.data;
                            // 上传成功
                            if (res2.state.code === 2000) {
                                resolve(
                                    $fetchCommon.transImgPath(
                                        'fix',
                                        res2.data.src || res2.data.file || res2.data.url
                                    )
                                const imgUrl = $fetchCommon.transImgPath(
                                    'fix',
                                    res2.data.src || res2.data.file || res2.data.url
                                );
                            } else {
                                reject({ message: res2.state.msg });
                                _readyUpload[file.url] = imgUrl;
                                resolve(imgUrl);
                            }
                            // 上传失败
                            else {
                                reject({
                                    ...requestFile,
                                    response: res2,
                                    message: res2.state.msg,
                                });
                            }
                        },
                        cancel() {
                            reject({ message: '上传图片已取消！' });
                        cancel(err) {
                            reject({
                                ...requestFile,
                                message: '上传图片已取消！',
                            });
                        },
                        fail() {
                            reject({ message: '上传图片失败！' });
                            reject({
                                ...requestFile,
                                message: '上传图片失败！',
                            });
                        },
                    });
                })