uniapp封装图片上传组件

可以考虑以下步骤来封装一个图片上传组件：

1. 创建一个组件文件夹，包括.vue组件文件和一个.js文件，用于实现上传逻辑。
2. 在.vue文件中，添加一个input标签，用于选择上传的图片。同时，可以添加一个预览区域，用于展示已选择的图片。
3. 在.js文件中，编写上传逻辑。可以使用uni.uploadFile()方法，上传图片到服务器。上传成功后，可以将图片的url保存到data中。
4. 在.vue文件中，添加一个上传按钮，用于触发上传逻辑。
5. 在组件的props中，添加必要的参数，如上传地址、上传参数等。
6. 在组件中，可以添加一些生命周期函数，如created、mounted等，用于初始化组件状态。

编写完成后，可以在需要使用上传图片功能的地方，引入该组件即可。

相关问题

uniapp封装图片上传组件具体代码

以下是一个简单的uniapp封装图片上传组件的代码示例：

1. 在components文件夹下创建一个image-upload文件夹，包括image-upload.vue和image-upload.js两个文件。

2. image-upload.vue文件代码：

<template>
  <div>
    <input type="file" ref="fileInput" @change="uploadImage" accept="image/*" style="display:none;">
    <div v-if="imageUrl" style="width:100px;height:100px;background-size:cover;background-repeat:no-repeat;background-position:center;background-image:url({{imageUrl}});"></div>
    <button @click="chooseImage">选择图片</button>
    <button @click="upload">上传</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',
      file: null
    }
  },
  methods: {
    chooseImage() {
      this.$refs.fileInput.click();
    },
    uploadImage() {
      this.file = this.$refs.fileInput.files[0];
      this.imageUrl = URL.createObjectURL(this.file);
    },
    upload() {
      if (!this.file) {
        return;
      }
      const formData = new FormData();
      formData.append('file', this.file);
      uni.uploadFile({
        url: this.uploadUrl,
        filePath: this.file.path,
        name: 'file',
        formData: formData,
        success: (res) => {
          const data = JSON.parse(res.data);
          if (data.code === 0) {
            this.$emit('success', data.data.url);
          } else {
            uni.showToast({
              title: data.msg,
              icon: 'none'
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '上传失败',
            icon: 'none'
          });
        }
      });
    }
  },
  props: {
    uploadUrl: {
      type: String,
      required: true
    }
  }
}
</script>

3. image-upload.js文件代码：

export default {
  mounted() {
    uni.getSetting({
      success: (res) => {
        if (!res.authSetting['scope.writePhotosAlbum']) {
          uni.authorize({
            scope: 'scope.writePhotosAlbum',
            success: () => {},
            fail: () => {
              uni.showModal({
                title: '提示',
                content: '请先授权保存图片到相册',
                success: (res) => {
                  if (res.confirm) {
                    uni.openSetting({
                      success: (res) => {}
                    });
                  }
                }
              });
            }
          });
        }
      }
    });
  }
}

使用时，在需要上传图片的页面中，引入该组件：

<template>
  <image-upload :upload-url="uploadUrl" @success="onSuccess"></image-upload>
</template>

<script>
import ImageUpload from '@/components/image-upload/image-upload.vue';

export default {
  components: {
    ImageUpload
  },
  data() {
    return {
      uploadUrl: 'your upload url'
    }
  },
  methods: {
    onSuccess(url) {
      // 上传成功后的处理逻辑
    }
  }
}
</script>

其中，onSuccess方法用于处理上传成功后的逻辑，uploadUrl用于设置上传图片的地址。注意，在使用该组件前，需要先在manifest.json文件中添加相应的权限声明，如：

"app-plus": {
  "permissions": {
    "photo": {
      "desc": "用于上传图片"
    }
  }
},

uniapp封装上传图片和显示图片

### UniApp 中封装图片上传与显示功能的方法

#### 1. 创建图片上传组件
为了提高代码的可重用性和维护性，在项目中创建一个新的 Vue 组件 `ImageUploader.vue` 来处理所有的逻辑[^1]。

<template>
  <view class="uploader">
    <!-- 预览已选中的图片 -->
    <block v-for="(image, index) in images" :key="index">
      <image :src="image.url"></image>
      <button @click="removeImage(index)">删除</button>
    </block>

    <!-- 添加新图片按钮 -->
    <button @click="chooseImage">选择图片</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      images: []
    };
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          const tempFilePaths = res.tempFilePaths;
          this.uploadImage(tempFilePaths);
        }
      });
    },

    uploadImage(paths) {
      paths.forEach((path) => {
        uni.uploadFile({
          url: 'https://example.com/upload', // 替换成实际服务器地址
          filePath: path,
          name: 'file',
          formData: {},
          success: (uploadRes) => {
            let serverUrl = JSON.parse(uploadRes.data).url; // 假设返回的是json对象，其中包含文件访问链接
            this.images.push({ url: serverUrl });
          }
        });
      });
    },

    removeImage(index) {
      this.images.splice(index, 1);
    }
  }
};
</script>

此段代码展示了如何构建一个简单的图像上传器，它允许用户挑选本地照片并将其发送到指定的服务端接口。成功之后会把远程路径保存下来用于后续展示[^2]。

#### 2. 使用自定义组件
当上述组件开发完成后就可以很方便地集成进其他页面里了：

<!-- pages/examplePage/examplePage.wxml -->
<import src="../../components/ImageUploader/ImageUploader"/>
<template is="ImageUploader"/>

通过这种方式可以轻松实现在不同场景下重复利用相同的上传控件而不必每次都重新编写相同业务逻辑[^3]。