uniapp图片压缩上传-uni-app 微信小程序 上传图片 文件 () 、 ()

使用uview框架上传,具体的方法就是使用()方法上传

```

<template>

<view style="color: #6e6e6e;">

<view class="u-p-t-30 u-p-b-10">

上传图片:

</view>

<!-- <u-upload :action="action" :file-list="fileList"></u-upload> -->

<u-upload :before-upload="beforeUpload"></u-upload>

</view>

</template>

<script>

export default {

data() {

return {}

},

onLoad: function(options) {

// (options);

},

methods: {

beforeUpload(index, list) {

(list[index]);

({

url: '---------------',// api地址

filePath: list[index].url, // 本地上传完成后的路径

name: 'file', // 默认

header: {

"Content-Type": "multipart/form-data", // formdata提交格式

"Authorization": 'Bearer ' + ('token') // token验证

},

formData: {  // 其他的formdata参数

fileType: '2',

fileContainerName: 'default'

},

success: function(uploadFileRes) {

('success', ());

}

});

}

}

}

</script>

<style lang="scss">

</style>

```

微信小程序项目注册需要上传门店信息,所以需要用到上传图片功能。

可以分为两种情况:

官方链接:

二、统一上传

点击选择框 首先使用(),从本地相册选择图片或使用相机拍照。成功则返回图片的本地文件路径列表 tempFilePaths;然后本地赋值保存本地图片地址。

官方链接:

附上效果图:

功能需求:

前端选择本地文件,将选择好的文件显示在界面上进行预览,可同时选择四张进行预览。

思路如下:

前端选择本地的png、jpg、等格式的图片,将图片以二进制的形式传到后端服务器,后端对二进制图片进行处理,返回给前端一个服务器链接在线图片,在浏览器就可以打开链接访问的那种。然后前端将这个图片链接渲染在页面进行预览。

首先

我们看一下uniapp的官方文档:

大概是这样的

先写一个模拟的demo

1:首先我是是用了colorUI的框架,在项目里面引入

在page底下的vue文件引入

这样一来,就不需要写什么样式了,直接使用写好的就行了。

效果是这样的

每次选完图片之后显示在页面上,我这里设置了最多可以选择四张,图片链接使用了临时的blob,接下来就要使用后端小伙伴给的接口,将自己本地的二进制文件传给他了。

在 chooseImage 选择好图片之后,写一个成功的

回调函数

,在回到函数里面添加一个图片上传的方法uploadFile,在方法里面添加url,等参数。

若是请求成功

则返回一个图片链接

添加接口之后 的,demo如下: