uniapp上传图片到服务器如何重新获取照片 • Worktile社区

fiy

Worktile&PingCode市场小伙伴

Uniapp 是一个跨平台的开发框架，可以在多个平台上进行开发，并且支持图片上传功能。如果要重新获取上传到服务器的照片，可以按照以下步骤进行操作：

前端页面添加上传功能：在前端页面上添加一个上传按钮，并设置相应的事件来处理上传逻辑。可以使用 uni-app 提供的上传组件或者自定义实现。
将照片上传到服务器：当用户选择照片并点击上传按钮时，前端代码会将照片文件发送到服务器。这可以通过 uni-app 提供的请求库如 uni.request() 或者 axios 进行发送。请求的 URL 应该指向服务器的接收图片的 API。
服务器接收并存储图片：服务器端接收到请求后，可以使用任何后端技术（如 Node.js、Java、PHP等）进行处理。服务器端将接收到的照片文件存储到指定的位置，可以是本地文件系统或者数据库。
获取重新上传的照片：在服务器端将照片存储成功后，可以返回一个包含图片地址的响应给前端。前端可以将该地址保存，并使用该地址重新获取图片。
前端重新获取图片：在前端页面中，将保存的图片地址赋值给一个 img 标签的 src 属性，浏览器会自动发送请求从服务器获取图片并在页面上显示。

需要注意的是，服务器端存储的图片地址需要对外可访问，可以通过设置合适的访问权限或者生成可访问的临时链接来实现。

以上就是在 Uniapp 中重新获取上传到服务器的照片的基本步骤。具体的实现细节还取决于你所使用的后端技术和服务器环境。

1年前 0条评论

worktile

Worktile官方账号

Uniapp是一款基于Vue.js的跨平台应用框架，可以用于快速开发App、小程序、H5等多种应用。在Uniapp中，要实现图片上传到服务器并重新获取照片，需要以下步骤：

编写前端页面：
在前端页面中，可以通过<input>标签的type属性设置为file来创建一个文件选择框，让用户选择要上传的图片。
获取文件对象：
通过JS代码获取用户选择的图片文件对象。可以使用event.target.files[0]来获取文件对象，其中event是一个触发上传事件的对象。
创建FormData对象并添加文件：
要将文件上传到服务器，需要创建一个FormData对象，并将文件添加到该对象中。可以使用new FormData()来创建FormData对象，然后使用formData.append('file', file)将文件添加到FormData中，其中file是步骤2中获取的文件对象。
发送请求到服务器：
使用uni.request()方法发送请求到服务器，将FormData对象作为数据传递给服务器。可以使用POST方法发送请求，将服务器端的接口地址、请求头等信息设置好，并将FormData对象作为请求的data属性。
服务器端处理：
服务器端接收到前端发送的请求后，可以根据需求对接收到的文件进行处理，例如保存到指定目录、生成缩略图等。处理完成后，可以返回一个图片的URL给前端。
前端获取图片URL：
在前端页面中，可以在请求成功的回调函数中获取服务器返回的图片URL，并将其保存到Vue组件的data中。然后可以通过<img>标签的src属性绑定该图片URL，从而重新显示图片。

通过以上步骤，就可以实现Uniapp中上传图片到服务器并重新获取照片的功能。不同的服务器端语言和框架可能会有细微的差异，具体实现还需根据实际情况进行调整。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

在uni-app中，要实现上传图片到服务器并重新获取照片，需要以下步骤和操作流程：

创建页面和相关组件
- 创建一个用于上传图片的页面，可以使用uni-app提供的组件如<image>和<button>等。
- 在页面中创建一个用于显示上传成功后的图片的<image>组件。
安装并引入uni-app的请求库
- 打开命令行工具，进入项目目录，执行以下命令安装uni-app的请求库：
```
npm install uni-request
```
- 在需要上传图片的页面中引入请求库：
```
import { request } from 'uni-request';
```

编写上传图片的函数

在页面中定义一个函数用于处理上传图片的操作，可以命名为uploadImage：

async uploadImage() {
  const res = await uni.chooseImage({
    count: 1, // 最多可选择的图片数量
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认两者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认两者都有
  });

  const tempFilePaths = res.tempFilePaths;

  const uploadRes = await request({
    url: 'http://example.com/upload', // 替换为实际的上传图片接口地址
    method: 'POST',
    files: tempFilePaths.map((item) => ({
      name: 'file', // 上传图片的参数名
      filePath: item,
    })),
  });

  if (uploadRes.statusCode === 200) {
    // 上传成功后，重新获取照片的操作
    this.reloadImage();
  } else {
    uni.showToast({
      title: '上传失败',
      duration: 2000,
      icon: 'none',
    });
  }
}

编写重新获取图片的函数

在页面中定义一个函数用于重新获取图片的操作，可以命名为reloadImage：

async reloadImage() {
  const res = await request({
    url: 'http://example.com/getImage', // 替换为实际的获取图片接口地址
    method: 'GET',
  });

  if (res.statusCode === 200) {
    this.imageSrc = res.data; // 将获取到的图片地址赋值给imageSrc变量
  } else {
    uni.showToast({
      title: '获取图片失败',
      duration: 2000,
      icon: 'none',
    });
  }
}

在页面中绑定点击事件
- 在页面的模板中，将上传图片和重新获取图片的函数绑定到按钮的点击事件上：
```
<template>
  <view>
    <image :src="imageSrc"></image>
    <button @tap="uploadImage">上传图片</button>
  </view>
</template>
```
初始化图片
- 在页面的data对象中定义一个imageSrc变量，并在页面的onLoad生命周期函数中将其初始化为空字符串：
```
data() {
  return {
    imageSrc: '',
  };
},
onLoad() {
  this.reloadImage();
}
```

通过以上步骤和操作流程，即可在uni-app中实现上传图片到服务器并重新获取照片的功能。

1年前 0条评论