时间戳

首页 > 解决方案 > 使用 Sails JS 和 Vue JS 上传文件

vue.js - 使用 Sails JS 和 Vue JS 上传文件

问题描述

我想用 Parasails 上传文件。但我有一个错误：

<- POST /api/v1/admin/create-article          (3ms 400)
 |  no file attached
 |  No file was attached.
 °

我想我的语法不好。我的html代码：

    <div class="form-group">
     <label for="imgFile">Image:</label>
      <input class="form-control-file" id="imgFile"  type="file" :class="[formErrors.imgFile ? 'is-invalid' : '']" autocomplete="imgFile">  
      <div class="invalid-feedback" v-if="formErrors.imgFile">S'il vous plaît, entrez une image valide.</div>
     </div>

我的行动 2：

module.exports = {
    files: ['imgFile'], 

  friendlyName: 'Create article',

  description: '',

  inputs: {
     imgFile: {
      description: 'Upstream for an incoming file upload.',
      type: 'ref'
     },   
    titre: {
      type: 'string',
      required: true,
    },
    description: {
      type: 'string',
      required: true,
    },
    contenue: {
      type: 'string',
      required: true,
    },

    postDate:{
      type: 'string',
      required: false,
    },

    etiquette:{
      type: 'number',
      required: false,
    },

    sharingLink:{
      type: 'string',
      required: false,
    }
  },


  exits: {
    success: {
      outputDescription: 'The newly created `Thing`.',
      outputExample: {}
    },

    noFileAttached: {
      description: 'No file was attached.',
      responseType: 'badRequest'
    },

    tooBig: {
      description: 'The file is too big.',
      responseType: 'badRequest'
    },
  },


  fn: async function (inputs, exits) {
    var util = require('util');

    // Upload the image.
    var info = await sails.uploadOne(inputs.imgFile, {
      maxBytes: 3000000
    })
    // Note: E_EXCEEDS_UPLOAD_LIMIT is the error code for exceeding
    // `maxBytes` for both skipper-disk and skipper-s3.
    .intercept('E_EXCEEDS_UPLOAD_LIMIT', 'tooBig')
    .intercept((err)=>new Error('The photo upload failed: '+util.inspect(err)));

    if(!info) {
      throw 'noFileAttached';
    }


    var unurl = await sails.helpers.convertUrl(inputs.titre);
    await Article.create({titre:inputs.titre, description:inputs.description, contenue:inputs.contenue ,postDate:inputs.postDate ,sharingLink:inputs.sharingLink,url:unurl, etiquette:inputs.etiquette}).fetch();
    return exits.success();



  }
};

我的根：

  'POST /api/v1/admin/create-article':                    { action: 'admin/create-article' },

我在我的项目中添加了这个包：sails-hook-uploads

我是 Sails 的新手，我不明白这个错误。谢谢！ 如何使用sails.js 中的新控制器操作格式上传文件

标签： vue.jsfile-uploadsails.js

解决方案

module.exports = {


  friendlyName: 'Update profile avatar',


  description: '',


  inputs: {

  },


  exits: {

    success: {
      responseType: 'redirect'
    },

    failure: {
      responseType: 'redirect'
    },

    unhandleError: {
      responseType: 'redirect',
    }

  },


  fn: async function (inputs, exits) {

    let req = this.req;
    let res = this.res;

    req.file('avatar').upload({
        saveAs: fileName,
        dirname: require('path').resolve(sails.config.appPath, 
                'assets/uploads')
    }, function whenDone(err, uploadedFile) { 
        // your code here
    });
  }


};

这是我在控制器中使用 req.file('file-name').upload() 函数时的代码。无需在输入中定义文件，因为使用 req

推荐阅读