多个el-upload标签保证上传的图片不一致

如果您在同一个页面中使用多个 `<el-upload>` 标签来上传图片，您可以通过以下几种方法来保证上传的图片不一致：

1. 给每个 `<el-upload>` 标签设置不同的 `name` 属性值，这样每个标签上传的图片就会保存在不同的字段中。
2. 使用不同的 `action` 属性值，这样每个标签上传的图片就会发送到不同的后台接口，从而保存在不同的位置。
3. 设置每个 `<el-upload>` 标签的 `before-upload` 属性，自定义上传前的处理函数，例如可以给每个标签设置不同的文件名前缀或者后缀，这样上传的图片就会命名不同，从而避免上传相同的图片。

相关问题

el-upload标签调用上传图片接口实现图片上传

el-upload标签是element-ui组件库的一个上传组件，可以方便地实现图片上传功能。调用上传图片接口实现图片上传的具体步骤如下：

1. 在Vue组件中引入el-upload组件：

<template>
  <el-upload
    class="upload-demo"
    action="/api/upload"
    :on-success="handleSuccess"
    :on-error="handleError"
    :before-upload="beforeUpload"
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

2. 在data中定义上传文件的参数：

data() {
  return {
    imageUrl: '',
    uploadHeaders: {
      'Authorization': 'Bearer ' + getToken(),
    },
  };
},

这里需要注意的是，上传图片时需要带上token进行身份验证，因此我们在uploadHeaders中添加了Authorization参数，值为当前用户的token。

3. 定义上传成功和上传失败的回调函数：

methods: {
  handleSuccess(response, file, fileList) {
    this.imageUrl = response.url;
    this.$message({
      message: '上传成功',
      type: 'success',
    });
  },
  handleError() {
    this.$message.error('上传失败');
  },
},

上传成功后，我们可以在handleSuccess回调函数中获取到服务器返回的图片url，然后将其赋值给imageUrl，以便在页面上显示上传的图片。

4. 定义上传前的钩子函数：

beforeUpload(file) {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJPG) {
    this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
    return false;
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    this.$message.error('上传头像图片大小不能超过 2MB!');
    return false;
  }
  return true;
},

在beforeUpload函数中，我们可以对上传的图片进行一些校验，比如限制图片的格式和大小等。

5. 最后，在服务器端编写上传图片的接口，接收图片文件并保存到服务器中。

以上就是使用el-upload标签调用上传图片接口实现图片上传的具体步骤。

el-upload标签实现图片上传

el-upload是element-ui中的一个组件，用于实现文件上传功能。

使用el-upload标签实现图片上传的步骤如下：

1. 引入element-ui组件库和样式文件。

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2. 在Vue实例中注册el-upload组件。

new Vue({
  el: '#app',
  components: {
    'el-upload': ElUpload
  },
  data: {
    imageUrl: '' // 保存上传后的图片地址
  },
  methods: {
    handleUploadSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw) // 设置图片地址
    }
  }
})

3. 在HTML中使用el-upload标签。

<el-upload
  class="avatar-uploader"
  :show-file-list="false"
  :on-success="handleUploadSuccess">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

其中，:show-file-list="false"表示不显示上传文件列表，:on-success="handleUploadSuccess"表示上传成功后调用handleUploadSuccess方法。在handleUploadSuccess方法中，使用URL.createObjectURL方法将上传的文件转换成图片地址，并保存在imageUrl属性中，以便在页面中显示。