我如何使用 Laravue 和 Dropzone 上传文件

Question

我正在努力让 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，但暂时无法正常工作

Answer 1

我想出了如何使用 dropzone 上传文件，en 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);
  });
},

和 returns 如果它被上传了，那么当我确认那是我需要的文件时，laravel 后端中的其他方法谁对文件做想做的事情，如果它一个 excel 文件（在 mi 的情况下）将数据上传到数据库，或者我想要的任何东西。像这样

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);
  });
},

我如何使用 Laravue 和 Dropzone 上传文件

How I can upload files using Laravue with Dropzone

vue.js

laravel-7

dropzone