| | |
| | | </template> |
| | | |
| | | <script> |
| | | import Taro from '@tarojs/taro'; |
| | | import { $ } from '@tarojs/extend'; |
| | | import { AtInput, AtImagePicker, AtCurtain } from 'taro-ui-vue'; |
| | | import { $fetcherCommon } from '@fetchers/FCommon'; |
| | | import './cImagePicker.scss'; |
| | | |
| | | export default { |
| | |
| | | AtCurtain, |
| | | }, |
| | | props: { |
| | | // 表单数据资源(表单组件内部机制专用) |
| | | itemRes: Object, |
| | | }, |
| | | data() { |
| | |
| | | const value = this.itemRes.formData[this.itemRes.name]; |
| | | let files = []; |
| | | if (Object.prototype.toString.call(value) === '[object String]') { |
| | | files = value.split(',').map((url) => ({ url })); |
| | | files = value.split(',').map(url => ({ url })); |
| | | } else if (Object.prototype.toString.call(value) === '[object Array]') { |
| | | files = value.map((url) => ({ url })); |
| | | files = value.map(url => ({ url })); |
| | | } |
| | | files.push({ type: 'btn' }); |
| | | return files; |
| | |
| | | }, |
| | | methods: { |
| | | handleChange(files, operationType, index) { |
| | | if (operationType === 'add') { |
| | | } |
| | | const value = []; |
| | | files.forEach((file) => { |
| | | files.forEach(file => { |
| | | if (file.type === 'btn') { |
| | | return; |
| | | } |
| | |
| | | duration: 2000, |
| | | }); |
| | | }, |
| | | $uploadImage(callback) { |
| | | const url = $fetcherCommon.getUploadImgURL(); |
| | | const uploadTeam = []; |
| | | const imgs = []; |
| | | this.files.forEach(file => { |
| | | if (file.type === 'btn') { |
| | | return; |
| | | } |
| | | // blob 二进制文件才上传 |
| | | if (file.url.indexOf('blob') >= 0) { |
| | | uploadTeam.push( |
| | | new Promise((resolve, reject) => { |
| | | Taro.uploadFile({ |
| | | url, |
| | | filePath: file.url, |
| | | name: 'file', |
| | | formData: {}, |
| | | success(res) { |
| | | const res2 = |
| | | typeof res.data === 'string' |
| | | ? JSON.parse(res.data) |
| | | : res.data; |
| | | if (res2.state.code === 2000) { |
| | | resolve( |
| | | $fetcherCommon.transImgPath( |
| | | 'fix', |
| | | res2.data.src |
| | | ) |
| | | ); |
| | | } else { |
| | | reject({ message: 'res2.state.msg' }); |
| | | } |
| | | }, |
| | | cancel() { |
| | | reject({ message: '上传图片已取消!' }); |
| | | }, |
| | | fail() { |
| | | reject({ message: '上传图片失败!' }); |
| | | }, |
| | | }); |
| | | }) |
| | | ); |
| | | } |
| | | // 其他类型视为 url,忽略 |
| | | else { |
| | | uploadTeam.push(Promise.resolve(file.url)); |
| | | } |
| | | }); |
| | | Promise.all(uploadTeam) |
| | | .then(res => { |
| | | this.itemRes.onChange(res); |
| | | setTimeout(() => { |
| | | callback('success'); |
| | | }, 0); |
| | | }) |
| | | .catch(err => { |
| | | callback('error', err); |
| | | }); |
| | | }, |
| | | }, |
| | | mounted() { |
| | | $(this.$refs.input.$el).find('.at-input__input').prepend(this.$refs.picker.$el); |
| | | if (process.env.TARO_ENV === 'h5') { |
| | | $(this.$refs.input.$el) |
| | | .find('.at-input__input') |
| | | .prepend(this.$refs.picker.$el); |
| | | } else if (process.env.TARO_ENV === 'weapp') { |
| | | $(this.$refs.input.$el) |
| | | .find('.at-input__container') |
| | | .append(this.$refs.picker.$el); |
| | | } |
| | | }, |
| | | }; |
| | | </script> |