271 lines
9.4 KiB
Plaintext
271 lines
9.4 KiB
Plaintext
<style lang="less">
|
|
page {}
|
|
|
|
.upload_file {
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
._item {
|
|
padding: 32rpx;
|
|
border-bottom: 1rpx solid #f5f5f5;
|
|
}
|
|
|
|
._cancel {
|
|
border-top: 16rpx solid #f8f8f8;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
<template>
|
|
<view :class="{'~show': chooseShow}" class="~cu-modal ~bottom-modal">
|
|
<view class="~cu-dialog" style="border-radius: 32rpx 32rpx 0 0;">
|
|
<view class="~bg_f upload_file">
|
|
<view class="_title _item ~font_32" @tap="onCamera">拍摄</view>
|
|
<view class="_title _item ~font_32" @tap="chooseImageV2">从手机相册选择</view>
|
|
<view class="_title _item ~font_32 ~color333 _cancel" @tap="cancelFn">取消</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import wepy from '@wepy/core'
|
|
import {service} from '../config'
|
|
import base from '../mixins/base'
|
|
import https from '../mixins/https'
|
|
import utils from '../utils/util'
|
|
|
|
wepy.component({
|
|
props: {
|
|
chooseShow: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
num: {
|
|
type: Number,
|
|
default: 1
|
|
}
|
|
},
|
|
data: {
|
|
uploadData: null,
|
|
uploader: {},
|
|
videos: [],
|
|
uploadPics: []
|
|
},
|
|
mixins: [https, base],
|
|
methods: {
|
|
chooseImageV2() { // 上传照片
|
|
let vm = this
|
|
console.log(vm.num, 'num===')
|
|
vm.$showLoading(`加载中...`)
|
|
vm.cancelFn()
|
|
wx.chooseMedia({
|
|
count: vm.num, // 上传图片的个数
|
|
mediaType: ['image'], // 限制上传的类型为image
|
|
sourceType: ['album'], // 可以指定来源是相册还是相机
|
|
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
|
success: (res) => { // 获取临时存放的视频资源
|
|
console.log(res.tempFiles)
|
|
console.log(res)
|
|
let index = 0
|
|
for (let item of res.tempFiles) {
|
|
console.log(item, '====123')
|
|
let type = item.fileType == 'video' ? 'video' : 'img'
|
|
// vm.uploadFileV2(item.tempFilePath, res.tempFiles, index++)
|
|
vm.uploadFile(item.tempFilePath, type, res.tempFiles, index++)
|
|
}
|
|
},
|
|
fail: () => {
|
|
console.log('e-----')
|
|
vm.$emit('changeVal', '')
|
|
vm.modalName = ''
|
|
wx.hideLoading()
|
|
}
|
|
})
|
|
},
|
|
onCamera() {
|
|
let vm = this
|
|
vm.cancelFn()
|
|
wx.chooseMedia({
|
|
count: 1,
|
|
mediaType: ['image'], // 限制上传的类型为image
|
|
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
|
sourceType: ['camera'], // 可以指定来源是相册还是相机
|
|
success: (res) => { // 获取临时存放的视频资源
|
|
vm.cancelFn()
|
|
let index = 0
|
|
console.log(res.tempFiles, 'res.tempFiles=')
|
|
for (let item of res.tempFiles) {
|
|
console.log(item, '====')
|
|
let type = item.fileType == 'video' ? 'video' : 'img'
|
|
vm.uploadFile(item.tempFilePath, type, res.tempFiles, index++)
|
|
}
|
|
},
|
|
fail: () => {
|
|
vm.$emit('changeVal', '')
|
|
vm.modalName = ''
|
|
wx.hideLoading()
|
|
}
|
|
})
|
|
},
|
|
// // 计算签名。
|
|
// function computeSignature(accessKeySecret, canonicalString) {
|
|
// return crypto.enc.Base64.stringify(crypto.HmacSHA1(canonicalString, accessKeySecret));
|
|
// }
|
|
|
|
uploadFile(filePath, type, filePaths, index) {
|
|
let vm = this
|
|
console.log(filePath, 'filePath')
|
|
console.log(vm.uploadData, 'vm.uploadData')
|
|
if (vm.uploadData) {
|
|
vm.$showLoading(`上传中...`)
|
|
let fileName = new Date().getTime() + Math.floor(Math.random() * 150) + '.' + filePath.split('.').pop().toLowerCase()
|
|
let filePathUrl = vm.uploadData.host + '/' + vm.uploadData.dir + fileName
|
|
wx.uploadFile({
|
|
url: vm.uploadData.host,
|
|
filePath: filePath,
|
|
name: 'file', // 必须填file。
|
|
formData: {
|
|
key: vm.uploadData.dir + fileName,
|
|
policy: vm.uploadData.policy,
|
|
OSSAccessKeyId: vm.uploadData.access_id,
|
|
signature: vm.uploadData.signature
|
|
// 'x-oss-security-token': securityToken // 使用STS签名时必传。
|
|
},
|
|
header: {
|
|
'Authorization': 'Bearer ' + wx.getStorageSync('token'),
|
|
// 'content-type': 'multipart/form-data',
|
|
'X-Requested-With': 'XMLHttpRequest'
|
|
},
|
|
success: (res) => {
|
|
if (res.statusCode === 204) {
|
|
console.log(filePathUrl, '上传成功')
|
|
let dataV2 = {
|
|
filePath: filePathUrl,
|
|
type: type
|
|
}
|
|
wx.hideLoading()
|
|
vm.uploadPics[index] = dataV2
|
|
let imagesLength = this.uploadPics.filter(item => item.filePath !== undefined && item.filePath !== null && !Number.isNaN(item.filePath)).length
|
|
if (imagesLength == filePaths.length) {
|
|
this.$emit('changeVal', this.uploadPics)
|
|
wx.hideLoading()
|
|
this.uploadPics = []
|
|
}
|
|
// if (vm.num == 1) {
|
|
// vm.$emit('changeVal', dataV2)
|
|
// } else {
|
|
// if (vm.uploadPics.length <= vm.num) {
|
|
// vm.uploadPics.push(dataV2)
|
|
// } else {
|
|
// console.log('==--099')
|
|
// vm.$emit('changeVal', vm.uploadPics)
|
|
// }
|
|
// }
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
console.log('error:=========', err)
|
|
wx.showModal({ // 使用模态框提示用户进行操作
|
|
title: `温馨提示：`,
|
|
content: `很抱歉` + JSON.stringify(err),
|
|
showCancel: false,
|
|
confirmText: `确定`,
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
vm.$gotoBack(1)
|
|
vm.$emit('changeVal', '')
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
let vm = this
|
|
vm.$showToast(`网络环境异常，请稍后重试`)
|
|
wx.request({
|
|
url: `${service.host}/ali/upload/signature`,
|
|
header: {
|
|
'Authorization': 'Bearer ' + wx.getStorageSync('token'),
|
|
'X-Requested-With': 'XMLHttpRequest'
|
|
},
|
|
method: 'get',
|
|
data: {},
|
|
success: ({code, data}) => {
|
|
vm.uploadData = data.data
|
|
vm.$app.$options.globalData.uploadData = data.data
|
|
vm.uploadFile(filePath, type, filePaths, index)
|
|
}
|
|
})
|
|
console.log('1111111111')
|
|
}
|
|
},
|
|
uploadFileV2(filePath, filePaths, index) {
|
|
this.$showLoading('上传中')
|
|
console.log('333-----')
|
|
wx.uploadFile({
|
|
url: `${service.host}/uploads`,
|
|
filePath: filePath,
|
|
method: 'POST',
|
|
name: 'fileData',
|
|
header: {
|
|
'Authorization': 'Bearer ' + wx.getStorageSync('token'),
|
|
'content-type': 'multipart/form-data',
|
|
'X-Requested-With': 'XMLHttpRequest'
|
|
},
|
|
success: ({data}) => {
|
|
console.log(JSON.parse(data), '------12345555')
|
|
let {code, message} = JSON.parse(data)
|
|
let url = JSON.parse(data).data
|
|
console.log(code, '333----')
|
|
if (code == 0) {
|
|
this.uploadPics[index] = url
|
|
console.log('index-----------------------------------------------------' + index, url)
|
|
let imagesLength = this.uploadPics.filter(item => item !== undefined && item !== null && !Number.isNaN(item)).length
|
|
console.log(imagesLength, filePaths.length, '====')
|
|
if (imagesLength == filePaths.length) {
|
|
this.$emit('changeVal', this.uploadPics)
|
|
wx.hideLoading()
|
|
console.log('this.images-----------------------------------------------------', this.uploadPics)
|
|
console.log('images.length------------------------------------------------', imagesLength)
|
|
console.log('filePaths.length-----------------------------------------', filePaths.length)
|
|
this.uploadPics = []
|
|
}
|
|
} else {
|
|
this.$showToast(message)
|
|
}
|
|
},
|
|
fail: (res) => {
|
|
},
|
|
complete: () => {
|
|
}
|
|
})
|
|
},
|
|
cancelFn() { // 取消方法
|
|
wx.hideLoading()
|
|
this.$emit('closeUploadPic', '')
|
|
},
|
|
getOssConfig() {
|
|
let vm = this
|
|
wx.request({
|
|
url: `${service.host}/ali/upload/signature`,
|
|
header: {
|
|
'Authorization': 'Bearer ' + wx.getStorageSync('token'),
|
|
'X-Requested-With': 'XMLHttpRequest'
|
|
},
|
|
method: 'get',
|
|
data: {},
|
|
success: ({code, data}) => {
|
|
vm.uploadData = data.data
|
|
vm.$app.$options.globalData.uploadData = data.data
|
|
}
|
|
})
|
|
}
|
|
},
|
|
created() {
|
|
let vm = this
|
|
vm.getOssConfig()
|
|
}
|
|
})
|
|
</script>
|