第uniapp上傳二進制圖片的實現功能需求：

前端選擇本地文件，將選擇好的文件顯示在界面上進行預覽，可同時選擇四張進行預覽。

思路如下：

前端選擇本地的png、jpg、等格式的圖片，將圖片以二進制的形式傳到后端服務器，后端對二進制圖片進行處理，返回給前端一個服務器鏈接在線圖片，在瀏覽器就可以打開鏈接訪問的那種。然后前端將這個圖片鏈接渲染在頁面進行預覽。

首先

我們看一下uniapp的官方文檔：https://uniapp.dcloud.io/api/media/imageid=chooseimage

大概是這樣的

先寫一個模擬的demo

1：首先我是是用了colorUI的框架，在項目里面引入

在page底下的vue文件引入

@import"../../colorui/main.css";

@import"../../colorui/icon.css";

這樣一來，就不需要寫什么樣式了，直接使用寫好的就行了。

template

view

form

view

view

圖片上傳

/view

view

{{imgList.length}}/4

/view

/view

view

view

viewv-for="(item,index)inimgList":key="index"@tap="ViewImage":data-url="imgList[index]"

image:src="imgList[index]"mode="aspectFill"/image

view@tap.stop="DelImg":data-index="index"

text/text

/view

/view

view@tap="ChooseImage"v-if="imgList.length4"

text/text

/view

/view

/view

/form

/view

/template

script

exportdefault{

data(){

return{

imgList:[],

//modalName:null,

methods:{

ChooseImage(){

uni.chooseImage({

count:4,//默認9

sizeType:['original','compressed'],//可以指定是原圖還是壓縮圖，默認二者都有

sourceType:['album'],//從相冊選擇

success:(res)={

if(this.imgList.length!=0){

this.imgList=this.imgList.concat(res.tempFilePaths)

}else{

this.imgList=res.tempFilePaths

ViewImage(e){

uni.previewImage({

urls:this.imgList,

current:e.currentTarget.dataset.url

//刪除

DelImg(e){

uni.showModal({

title:'刪除',

content:'確定要刪除這張圖片？',

cancelText:'取消',

confirmText:'刪除',

success:res={

if(res.confirm){

this.imgList.splice(e.currentTarget.dataset.index,1)

/script

style

@import"../../colorui/main.css";

@import"../../colorui/icon.css";

.cu-form-group.title{

min-width:calc(4em+15px);

/style

效果是這樣的

每次選完圖片之后顯示在頁面上，我這里設置了最多可以選擇四張，圖片鏈接使用了臨時的blob，接下來就要使用后端小伙伴給的接口，將自己本地的二進制文件傳給他了。

在chooseImage選擇好圖片之后，寫一個成功的回調函數，在回到函數里面添加一個圖片上傳的方法uploadFile，在方法里面添加url，等參數。

success:(res)={

consttempFilePaths=res.tempFilePaths;

constuploadTask=uni.uploadFile({

url:'http://47.xxx.xxx.78:8088/chemApp/work/upload.action',

filePath:tempFilePaths[0],

name:'file',

success:function(uploadFileRes){

console.log(uploadFileRes);

_this.imgList=[..._this.imgList,uploadFileRes.data]

}

若是請求成功

則返回一個圖片鏈接

添加接口之后的，demo如下：

template

view

form

view

view

圖片上傳

/view

view

{{imgList.length}}/4

/view

/view

view

view

viewv-for="(item,index)inimgList":key="index"@tap="ViewImage":data-url="item"

imagev-if="item":src="item"mode="aspectFill"/image

view@tap.stop="DelImg":data-index="index"

text/text

/view

/view

view@tap="ChooseImage"v-if="imgList.length4"

text/text

/view

/view

/view

/form

/view

/template

script

exportdefault{

data(){

return{

imgList:[],

//modalName:null,

methods:{

ChooseImage(){

const_this=this

uni.chooseImage({

count:4,//默認9

sizeType:['original','compressed'],//可以指定是原圖還是壓縮圖，默認二者都有

sourceType:['album'],//從相冊選擇

success:(res)={

consttempFilePaths=res.tempFilePaths;

constuploadTask=uni.uploadFile({

url:'http://47.xxx.xxx.78:8088/chemApp/work/upload.action',

filePath:tempFilePaths[0],

name:'file',

success:function(uploadFileRes){

console.log(uploadFileRes);

_this.imgList=[..._this.imgList,uploadFileRes.data]

ViewImage(e){

uni.previewImage({

urls:this.imgList,

current:e.currentTarget.dataset.url

//刪除

DelImg(e){

uni.showModal({

title:'刪除',

content:'確定要刪除這張圖片？',

cancelText:'取消',

confirmText:'刪除',

success:res={

if(res.confirm){

this.imgList.splice(e.currentTarget.dataset.index,1)

/script

style

@import"../../colorui/main.css"