uniapp 使用uview2.0 u-upload组件上传图片文件

**UniApp使用UView2.0 U-Upload组件上传图片文件**

在开发移动端应用时，上传图片是非常常见的需求。UView2.0 提供了一个方便易用的 `u-upload` 组件，可以帮助我们实现图片上传功能。在本文中，我们将详细介绍如何使用 `u-upload` 组件在 UniApp 中上传图片文件。

### 一、安装依赖首先，我们需要安装 UView2.0 的依赖包。可以通过以下命令安装：

bashnpm install uview-ui

或者，如果你使用 yarn，直接执行：

bashyarn add uview-ui

### 二、配置UView在 `uni-app.config.js` 文件中添加 UView 的配置信息：

javascriptmodule.exports = {
 // ...
 plugins: [
 'uview-ui'
 ]
}

### 三、使用U-Upload组件现在，我们可以在页面中使用 `u-upload` 组件来上传图片了。例如，在一个名为 `uploadPage.vue` 的 Vue 页面中：

html<template>
 <div>
 <u-upload :action="uploadUrl"
 :show-loading="true"
 @on-success="handleSuccess"
 @on-error="handleError"
 >
 <view class="flex flex-wrap">
 <text>点击上传</text>
 <image src="/static/images/upload.png" mode="aspectFit"></image>
 </view>
 </u-upload>
 </div>
</template>

<script>
export default {
 data() {
 return {
 uploadUrl: '/api/upload', //你的图片上传接口 }
 },
 methods: {
 handleSuccess(res) {
 console.log('上传成功:', res)
 },
 handleError(err) {
 console.error('上传失败:', err)
 }
 }
}
</script>

在上面的示例中，我们使用了 `u-upload` 组件，并配置了其属性：

* `action`: 指定图片上传的接口地址。
* `show-loading`: 是否显示加载动画。
* `@on-success` 和 `@on-error`: 分别用于处理上传成功和失败时的回调函数。

### 四、后端接口实现在后端接口中，我们需要实现一个接受图片文件并返回上传结果的 API。例如，使用 Node.js Express 框架：

javascriptconst express = require('express')
const multer = require('multer')

const app = express()

// 配置 Multer上传参数const upload = multer({
 dest: './uploads/', //上传文件存放目录 limits: { fileSize:5 *1024 *1024 } // 最大允许上传文件大小为5MB})

app.post('/api/upload', upload.single('file'), (req, res) => {
 const file = req.file if (!file) {
 return res.status(400).send({ message: '上传失败' })
 }

 // 处理上传的图片文件 console.log(`上传成功：${file.path}`)

 res.send({ message: '上传成功', data: { url: file.path } })
})

app.listen(3000, () => {
 console.log('服务启动于  />})

在上面的示例中，我们使用 Multer 库来实现图片文件的上传功能。配置了上传参数后，接收到 POST 请求时会自动解析并处理图片文件。

### 五、总结通过本文的介绍，你应该已经掌握了如何使用 UView2.0 的 `u-upload` 组件在 UniApp 中上传图片文件。同时，也了解了后端接口实现的基本步骤。在实际开发中，需要根据具体需求进行调整和扩展。

如果你有任何问题或建议，请随时与我分享！