uniapp editor组件 如何上传图片

**UniApp Editor 组件如何上传图片**

在 UniApp 中，Editor 组件是一个非常强大的富文本编辑器，可以让用户输入各种类型的内容，包括文字、图片等。然而，在实际使用中，我们经常需要将用户上传的图片保存到服务器上，这样才能实现图片的展示和管理。在本篇文章中，我们将详细介绍如何在 UniApp Editor 组件中上传图片。

**步骤一：准备好必要组件**

首先，我们需要在页面中引入 `uni-editor` 组件，并且配置好相关参数。例如，设置编辑器的高度、宽度等。

html<template>
 <view>
 <!-- 编辑器容器 -->
 <editor @change="handleChange" :height="300" :width="750"></editor>
 </view>
</template>

<script>
import editor from '@dcloudio/uni-editor';

export default {
 components: { editor },
 data() {
 return {};
 },
 methods: {
 handleChange(e) {
 console.log('编辑器内容变化:', e.detail.value);
 },
 },
};
</script>

**步骤二：创建上传图片的逻辑**

在上一步中，我们已经引入了 `uni-editor` 组件，并且配置好相关参数。接下来，我们需要创建一个函数来处理用户上传的图片。

我们可以使用 `uni.chooseImage` API 来选择图片，然后将选中的图片传递给编辑器。

javascriptchooseImage() {
 uni.chooseImage({
 count:1,
 sizeType: ['original', 'compressed'],
 sourceType: ['album', 'camera'],
 success: (res) => {
 const img = res.tempFilePaths[0];
 this.editor.insert(img);
 },
 });
},

在上面的代码中，我们使用 `uni.chooseImage` API 来选择图片，选中的图片会被保存到 `tempFilePaths` 数组中。我们取出第一个元素（即选中的图片），然后将其传递给编辑器的 `insert` 方法。

**步骤三：处理上传图片的逻辑**

在上一步中，我们已经创建了一个函数来处理用户上传的图片。接下来，我们需要处理这个函数。

我们可以使用 `uni.uploadFile` API 来上传选中的图片。

javascriptuploadImage(img) {
 uni.showLoading({
 title: '上传中...',
 mask: true,
 });

 const formData = new FormData();
 formData.append('file', img);

 uni.uploadFile({
 url: '/api/upload',
 filePath: img,
 name: 'file',
 header: { 'Content-Type': 'multipart/form-data' },
 formData,
 success: (res) => {
 console.log(res);
 this.editor.insert(`![${img}](${res.data})`);
 uni.hideLoading();
 },
 });
},

在上面的代码中，我们使用 `uni.uploadFile` API 来上传选中的图片。我们创建一个 `FormData` 对象，并且将选中的图片追加到其中。

**步骤四：整合所有逻辑**

最后，我们需要将所有的逻辑整合起来。

我们可以在编辑器的 `change`事件中调用 `chooseImage` 函数，选择图片，然后上传。

javascripthandleChange(e) {
 console.log('编辑器内容变化:', e.detail.value);
 this.chooseImage();
},

在上面的代码中，我们使用 `chooseImage` 函数来选择图片，然后上传。

**总结**

在本篇文章中，我们详细介绍了如何在 UniApp Editor 组件中上传图片。我们创建了一个函数来处理用户上传的图片，并且使用 `uni.uploadFile` API 来上传选中的图片。最后，我们整合所有逻辑，实现了图片的上传和展示。

**参考代码**

html<template>
 <view>
 <!-- 编辑器容器 -->
 <editor @change="handleChange" :height="300" :width="750"></editor>
 </view>
</template>

<script>
import editor from '@dcloudio/uni-editor';

export default {
 components: { editor },
 data() {
 return {};
 },
 methods: {
 handleChange(e) {
 console.log('编辑器内容变化:', e.detail.value);
 this.chooseImage();
 },
 chooseImage() {
 uni.chooseImage({
 count:1,
 sizeType: ['original', 'compressed'],
 sourceType: ['album', 'camera'],
 success: (res) => {
 const img = res.tempFilePaths[0];
 this.uploadImage(img);
 },
 });
 },
 uploadImage(img) {
 uni.showLoading({
 title: '上传中...',
 mask: true,
 });

 const formData = new FormData();
 formData.append('file', img);

 uni.uploadFile({
 url: '/api/upload',
 filePath: img,
 name: 'file',
 header: { 'Content-Type': 'multipart/form-data' },
 formData,
 success: (res) => {
 console.log(res);
 this.editor.insert(`![${img}](${res.data})`);
 uni.hideLoading();
 },
 });
 },
 },
};
</script>

**注释**

* `uni.chooseImage` API：用于选择图片。
* `uni.uploadFile` API：用于上传选中的图片。
* `FormData` 对象：用于将选中的图片追加到其中。
* `editor.insert` 方法：用于插入选中的图片到编辑器中。