| | |
| | | /** |
| | | * CImagePicker |
| | | * 图片选择器组件,用于在表单中上传和管理图片 |
| | | * 支持单张和多张图片上传,并提供压缩、预览等功能 |
| | | * 可限制上传图片的数量和来源(相册/相机) |
| | | * @author Tevin |
| | | */ |
| | | |
| | |
| | | <AtImagePicker |
| | | ref="picker" |
| | | mode="aspectFit" |
| | | :sourceType="sourceType" |
| | | :multiple="count > 1" |
| | | :count="count" |
| | | :showAddBtn="!selectedFull" |
| | | :length="3" |
| | | :files="files" |
| | | :onChange="(files,operationType,index)=>handleChange(files,operationType,index)" |
| | | :onFail="evt=>handleFail(evt)" |
| | | :onImageClick="(index, file)=>handleImgView(index,file)" |
| | | :onChange="(files,operationType,index) => handleChange(files,operationType,index)" |
| | | :onFail="evt => handleFail(evt)" |
| | | :onImageClick="(index, file) => handleImgView(index,file)" |
| | | /> |
| | | <CImageCompressor ref="compressor" /> |
| | | <CImagePreview ref="imgPreview" /> |
| | |
| | | type: Number, |
| | | default: 1, |
| | | }, |
| | | // 图片来源 |
| | | sourceType: { |
| | | type: Array, |
| | | default: () => ['album', 'camera'], |
| | | }, |
| | | // 上传图片参数 |
| | | params: { |
| | | type: Object, |
| | | default: () => {}, |
| | | }, |
| | | // 是否开启缩略图 |
| | | needThumb: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | }, |
| | | data() { |
| | |
| | | if (file.file && file.file.originalFileObj) { |
| | | if ( |
| | | /image\/(gif|png|jpg|jpeg)/.test( |
| | | file.file.originalFileObj.type |
| | | file.file.originalFileObj.type, |
| | | ) |
| | | ) { |
| | | return true; |
| | |
| | | const needs = nextFiles |
| | | .map((file, needIndex) => { |
| | | const fileInfo = file.file; |
| | | // 没有 file 信息对象,或者不是 blob 类型 |
| | | if (!fileInfo || fileInfo.path.indexOf('blob') < 0) { |
| | | // 没有 file 信息对象,或者不是 blob、wxfile、tmp 类型 |
| | | if ( |
| | | !fileInfo || |
| | | (fileInfo.path.indexOf('blob') < 0 && |
| | | fileInfo.path.indexOf('wxfile') < 0 && |
| | | fileInfo.path.indexOf('http://tmp/') < 0) |
| | | ) { |
| | | return false; |
| | | } |
| | | // 尺寸小于 1M 的图片 |
| | |
| | | callback(state, res); |
| | | } |
| | | }, |
| | | this.params |
| | | $fetchCommon.transKeyName('underline', { |
| | | ...this.params, |
| | | needThumb: this.needThumb ? 1 : 0, |
| | | }), |
| | | ); |
| | | }, |
| | | }, |
| | |
| | | // 图片上传节流 |
| | | const _readyUpload = {}; |
| | | |
| | | export const uploadImage = (files, callback, params) => { |
| | | export const uploadImage = (files, callback, formData = {}) => { |
| | | if (!files || files.length === 0) { |
| | | callback('success', []); |
| | | return; |
| | |
| | | ...requestFile, |
| | | header, |
| | | name: 'file', |
| | | formData: { ...params }, |
| | | formData, |
| | | timeout: 30 * 1000, |
| | | success(res) { |
| | | let res2; |
| | |
| | | if (res2.state.code === 2000) { |
| | | const imgUrl = $fetchCommon.transImgPath( |
| | | 'fix', |
| | | res2.data.src || res2.data.file || res2.data.url |
| | | res2.data.src || res2.data.file || res2.data.url, |
| | | ); |
| | | _readyUpload[file.url] = imgUrl; |
| | | resolve(imgUrl); |
| | |
| | | }); |
| | | }, |
| | | }); |
| | | }) |
| | | }), |
| | | ); |
| | | } |
| | | // 其他类型视为 url,忽略 |