前端vue单个文件上传支持图片,压缩包以及文件 , 下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13066

前端vue单个文件上传支持图片,压缩包以及文件 , 下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13066

效果图如下:

 

前端vue单个文件上传支持图片,压缩包以及文件 , 下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13066_第1张图片

前端vue单个文件上传支持图片,压缩包以及文件 , 下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13066_第2张图片

#### 使用方法

```使用方法

addPhotoClick() {

uni.hideLoading();

let myThis = this;

if (myThis.photoList.length >= 1) {

myThis.photoList = [];

}

uni.chooseImage({

count: 1,

sizeType: ['compressed'], //可以指定是原图还是压缩图,默认二者都有

sourceType: ['album'], //从相册选择

success: function(res) {

myThis.photoList = [{'filePath':res.tempFilePaths[0]}];

console.log('选择图片 =' + JSON.stringify(myThis.photoList));

}

});

},

if (this.photoList.length > 0) {

myFilePath = this.photoList[0].filePath;

}

// 服务器地址上传地址 仅为示例,非真实的接口地址

let baseUrl = "http://gzcc.com/cc//appSc/up"

uni.uploadFile({

url: baseUrl, //仅为示例,非真实的接口地址

filePath: myFilePath, //文件路径

name: 'image', //服务端文件接受key

formData: this.myParamData,

success: (uploadFileRes) => {

uni.hideLoading();

let dataDic = JSON.parse(uploadFileRes.data);

console.log('uploadFileRes成功 = ' + JSON.stringify(uploadFileRes));

console.log('datadic成功 = ' + typeof(dataDic));

console.log('code码 = ' + dataDic['code']);

}

});

```

#### HTML代码部分

```html