使用Sails JS和Vue JS上传文件

时间:2018-10-20 08:35:51

标签: vue.js file-upload sails.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的新手,我不理解此错误。 谢谢! How to upload a file using the new controller actions format in sails.js

2 个答案:

答案 0 :(得分:0)

感谢您的回答!

我认为这是一个前端问题。当我在操作中对“输入”创建“ console.log”时:

{ imgFile: 
   Upstream {
     _fatalErrors: [],
     isNoop: true,
     _files: [],
     timeouts: { untilFirstFileTimer: [Object], untilMaxBufferTimer: [Object] },
     _readableState: 
      ReadableState {
        objectMode: true,
        highWaterMark: 16,
        buffer: [Object],
        length: 0,
        pipes: null,
        pipesCount: 0,
        flowing: null,
        ended: false,
        endEmitted: false,
        reading: false,
        sync: true,
        needReadable: false,
        emittedReadable: false,
        readableListening: false,
        resumeScheduled: false,
        destroyed: false,
        defaultEncoding: 'utf8',
        awaitDrain: 0,
        readingMore: false,
        decoder: null,
        encoding: null },
     readable: true,
     domain: null,
     _events: { error: [Function] },
     _eventsCount: 1,
     _maxListeners: undefined,
     fieldName: 'NOOP_imgFile' },
  titre: 'inputs inputs inputs inputs',
  description: 'inputs inputs inputs',
  contenue: 'inputs inputs inputs',
  postDate: '2019-12-21T09:13',
  etiquette: 1 }

在Chrome开发工具上:

response of the tool

我认为不是Websocket请求是XMLHttpRequest(类型; xhr)。

答案 1 :(得分:0)

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