php移动端上传图片,移动端图片上传实施分享

一.基本思路

1.相册(相机插件)取到图片地址拿到图片本地路径(pictureUrl)----->用于页面展示

2.通过图片本地路径将图片转化为base64格式---->用于上传

3.通过formdata格式上传图片

二.详细步骤

1,获取图片(以海马汇桥接为例)

拍照

takePhoto () {

let vm = this

var options = {

'allowEdit': true, // 拍完照后是否允许编辑

'editShape': 1, // 当allowEdit为true时，希望获取到的形状0圆形，1矩形, 2正方形

}

var param = {

className: 'CameraBridge',

function: 'takePicture',

params: options,

successCallBack: 'onSuccess',

failCallBack: 'onError',

}

HandBridge.postMessage(JSON.stringify(param))

// 成功回调

window.onSuccess = function (message) {

// message：图片地址

let img = {

pictureId: vm.randomUUID(),

pictureUrl: message, // 照片的地址

// imageName: vm.getImageName(message),

}

// vm.readFile(img)

// vm.showImgPreview = false

vm.showActionSheet = false

vm.image2Base64(img)

}

// 失败回调

window.onError = function (message) {

// vm.showImgPreview = false

vm.showActionSheet = false

alert(message)

}

},

相册选择

selectPhotoFormAlbum () {

let vm = this

// 调用方式

// var options = {

// maxImages: 1, // 仅对Android有效，如果不传该参数调用的是图片单选插件返回的为图片地址的字符串，如果参数值为大于等于1的整数则调用图片多选插件，返回数组

// }

var argument = {

className: 'CameraBridge',

function: 'getPicture',

// params: options,

successCallBack: 'onSuccess',

failCallBack: 'onError',

}

HandBridge.postMessage(JSON.stringify(argument))

// 成功回调

window.onSuccess = function (results) {

// alert('成功' + results)

let img = {

pictureId: vm.randomUUID(),

pictureUrl: results, // 照片的地址

// imageName: vm.getImageName(results),

}

// vm.readFile(img)

vm.showActionSheet = false

vm.image2Base64(img)

}

// 失败回调

window.onError = function (error) {

vm.showActionSheet = false

alert('Error: ' + error)

}

},

2.图片转base64格式

image2Base64 (img) {

let vm = this

// 成功回调

window.onSuccess = function (message) {

// alert(message)

let image = {

// thumbnailurl: img.pictureUrl,

pictureId: img.pictureId,

pictureUrl: img.pictureUrl, // file_path

// imageName: img.imageName, // file_name

}

let imgUrls = JSON.parse(message)

vm.imgList.push(image)

vm.addFile(imgUrls.data, img.pictureId, img.imageName)

}

// 失败回调

window.onError = function (message) {

alert(message)

}

var options = {

'filePath': img.pictureUrl,

'quality': 50, // 取值范围0-100 100时图片不压缩

}

var param = {

className: 'FileBridge',

function: 'image2Base64',

params: options,

successCallBack: 'onSuccess',

failCallBack: 'onError',

}

HandBridge.postMessage(JSON.stringify(param))

},

//添加用于上传的图片数组

addFile (file, pictureId, imageName) {

let img = {

pictureId: pictureId,

file: file,

// imageName: imageName,

}

this.imageTemArr.push(img)

// this.uploadImages()

},

3.图片上传

页面父组件调用

// 上传

uploadImages () {

let vm = this

vm.$hips.indicator.show({

spinColor: '#1f8ceb',

pureBackground: true,

})

vm.imageTemArr = []

return new Promise((resolve, reject) => {

vm.$refs.imageGroup.uploadImage().then(res => {

console.log(res)

vm.imgIdList = []

vm.$hips.indicator.hide({

spinColor: '#1f8ceb',

pureBackground: true,

})

if (res === 'S') {

console.log('无图片上传')

resolve('S')

} else {

if (res.data.success) {

res.data.data.forEach(function (item, index) {

let obj = {}

obj.pictureId = item.fileId

obj.pictureUrl = item.fileUrl

vm.imgIdList.push(obj)

})

resolve('S')

} else {

vm.$hips.toast({

message: '图片上传失败',

position: 'middle',

})

}

}

}, (err) => {

console.log(JSON.stringify(err))

}).catch(error => {

vm.imgIdList = []

console.log(JSON.stringify(error))

reject(error)

})

})

},

以上代码可以看到我们在父组件中调用图片组件的uploadImage方法

子组件uploadImage方法

uploadImage () {

return new Promise((resolve, reject) => {

let vm = this

if (vm.imageTemArr.length) {

imageService.uploadImage(vm.imageTemArr).then(res => {

resolve(res)

// alert('图片上传成功：' + res)

}).catch(error => {

// this.showPrompt('图片上传失败，请重新点击上传!')

alert('图片上传失败，请重新点击上传!')

console.log('图片上传失败,错误信息：' + error)

})

} else {

resolve('S')

}

})

},

在子组件中我们调用了公共服务imageService中的uploadImage方法真正实现上传

imageService中定义的uploadImage方法

uploadImage (imageTemArr) {

let imageList = []

imageTemArr.forEach(function (item, index) {

imageList.push(item.file)

})

let formData = new FormData()

formData.append('files', imageList) // 图片base64格式

let url = `https://*********.com/lightkits-center/v1/${window.localStorage.organizationId}/files/base64Batch`

return Axios.postFormData(formData, url)

},

这样就完整的实现了图片上传的功能