如何使用带有 Dropzone 的 Laravue 上传文件答案

【问题标题】：How I can upload files using Laravue with Dropzone如何使用带有 Dropzone 的 Laravue 上传文件
【发布时间】：2020-06-12 20:42:20
【问题描述】：

我正在努力让 Laravue Dropzone 工作，但我还没有工作

代码如下：

<el-dialog :title="'Importar Bitacora'" :visible.sync="dialogFormVisible">
  <div v-loading="weblogCreating" class="form-container">
    <el-form ref="weblogForm" :rules="rules" :model="newBitacora" label-position="left" label-width="150px">
      <div class="editor-container">
        <dropzone id="CargarBitacora" url="/api/bitacora/importar" @dropzone-removedFile="dropzoneR(e)" @dropzone-error="dropzoneError" @dropzone-success="dropzoneS" />
      </div>
    </el-form>
  </div>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">
      {{ $t('bitacora.cancel') }}
    </el-button>
    <el-button type="primary" @click="handleUpload()">
      {{ $t('bitacora.confirm') }}
    </el-button>
  </div>
</el-dialog>

<script>
  import Dropzone from '@/components/Dropzone';
  export default {
    name: 'BitacoraList',
    components: { Dropzone },
    data() {
      return {
        files: [],
      },
      created() {
        .. code here ..
      },
      methods: {
        handleUpload(e) {
        const formData = new FormData();

        this.files.forEach(file => {
          formData.append('files[]', file);
        });
        console.log(this.files);
      },
    }
 };
</script>

我已尝试将文件传递给 handleUpload，但目前无法使其正常工作

【问题讨论】：

标签： vue.js laravel-7 dropzone

【解决方案1】：

我想出了如何使用 dropzone 上传文件，使用方法 handleUpload 我只需要将文件发送到 laravel 后端的 post 方法，该方法上传临时文件

dropzoneR(file) {
  var name = file.upload.filename;
  fileResource.borrar(name).then(response => {
    this.files.splice(this.files.indexOf(name), 1);
    if (this.files.length < 1) {
      this.btnUpload = true;
    }
  }).catch(error => {
    console.log(error);
  });
},

如果它被上传，则返回一个 ok，然后当我确认那是我需要的文件时，laravel 后端中的其他方法如果它是一个 excel 文件（在我的情况下）上传数据到数据库，或者我想要的任何东西。像这样

async handleUpload(e) {
  this.weblogCreating = true;
  await bitacoraResource.store(this.files).then(response => {
    this.$message({ message: 'Bitacoras importadas satisfactoriamente', type: 'success' });
    this.files = '';
    this.dialogImportVisible = false;
    this.weblogCreating = false;
    this.getList();
  }).catch(error => {
    this.$message({
      message: 'Error importando las bitacoras ' + error.getMessage,
      type: 'error',
    });
    this.weblogCreating = false;
    console.log(error.message);
  });
},

【讨论】：