laravel - 如何在不存储在 aws s3 中的情况下预览图像？

Question

我的问题是：我应该创建 2 个文件夹：一个用于临时文件夹，另一个用于原始文件夹？我正在使用一个组件来上传图片。当我上传图像时，它存储在 s3 中，然后再次检索以显示在小图像中。我的问题是如果我上传了 1 张图片，然后我决定上传另一张图片，我在 S3 存储桶中上传了 2 个文件，依此类推......没有按添加类别。最后：我正在使用 Vue 2 和 Laravel 7.x，谢谢。

我对存储过程不太熟悉，但我需要帮助来决定什么更有效，谢谢。

类别.vue

<template>
  <Modal v-model="addModal" :closable="false" :mask-closable="false" title="Add a category">
    <Input v-model="data.categoryName" placeholder="Add category..."/>
    <div class="space"></div>
    <Upload ref="uploads" action="/app/upload" :format="['jpg','jpeg','png']" :
            headers="{'x-csrf-token': token, 'X-Requested-With': 'XMLHttpRequest'}" :max-size="2048"
            :on-error="handleError" :on-exceeded-size="handleMaxSize" :on-format-error="handleFormatError"
            :on-success="handleSuccess" type="drag">
      <div style="padding: 20px 0">
        <Icon size="52" style="color: #3399ff" type="ios-cloud-upload"></Icon>
        <p> Click or drag files here to upload </p>
      </div>
    </Upload>

    <div v-if="data.iconImage" class="demo-upload-list">
      <img :src="`${data.iconImage}`"/>
      <div class="demo-upload-list-cover">
        <Icon type="ios-trash-outline" @click="deleteImage"></Icon>
      </div>
    </div>

    <div slot="footer">
      <Button type="default" @click="addModal=false">Close</Button>
      <Button :disabled="isAdding" :loading="isAdding" type="primary" @click="addCategory">
        {{ isAdding ? 'Adding ..' : 'Add a category' }}
      </Button>
    </div>
  </Modal>
</template>

<script>
// Other parts of this section are removed for clarity
export default {
  methods: {
    async addCategory() {
      console.log('1', this.data.iconImage)
      if (this.data.categoryName.trim() === '') return this.e('This Category is required')
      if (this.data.iconImage.trim() === '') return this.e('This Icon Image is required')


      this.data.iconImage = `${this.data.iconImage}`
      console.log('2', this.data.iconImage)


      const res = await this.callApi('post', 'app/create_category', this.data)

      if (res.status === 200) {
        this.categoryLists.unshift(res.data)
        this.s('Category has been succesfully')
        this.addModal = false
        this.data.categoryName = ''
        this.data.iconImage = ''
        this.$refs.uploads.clearFiles()
      } else {
        if (res.status === 422) {
          if (res.data.errors.categoryName) {
            this.e(res.data.errors.categoryName[0])
          }
          if (res.data.errors.iconImage) {
            this.e(res.data.errors.iconImage[0])
          }
        } else {
          this.swr()
        }
      }
    },
  },
}

</script>

我的 addCategory 控制器

public function addCategory(Request $request)
{
    $this->validate($request, [
        'categoryName' => 'required',
        'iconImage'    => 'required',
    ]);

    $category = new Category();

    $category->categoryName = $request->categoryName;
    $category->iconImage = $request->iconImage;

    $category->save();

    return response()->json($category);
}

标签： laravelamazon-web-servicesvue.jsamazon-s3vuejs2