獲取文件名從文件上傳陣營前端

我有一個文件上傳組件的陣營，使一個POST到我的Rails API：獲取文件名從文件上傳陣營前端

class uploadFormState { 
    @observable file; 

    constructor() { 
    this.file = ''; 
    } 

    @action.bound setFile(file){ 
    this.file = file[0]; 
    this.fileName = file[0].name; 
    } 

    @action.bound uploadFile() { 
    $.ajax({ 
     url: AppConstants.APIEndpoints.USERLOCATIONS + '/1/photos/1/upload', 
     headers: { "Authorization": localStorage.getItem('authToken') }, 
     data: this.file, 
     processData: false, 
     contentType: false, 
     type: 'POST', 
     success: function (data) { 
      alert(this.data.name + " uploaded successfully!"); 
     } 
    }); 
    } 
} 

export default new uploadFormState();

正如你可以在數據領域看，我試圖將原始文件名傳遞給rails後端。問題是，我不知道如何獲得這些數據參數。

我上傳的方法是這樣的：

def upload 
    @photo.upload_model(request.body) 
    end

和類方法`upload_model」看起來是這樣的：

def upload_model(model_file) 
    model = StorageBucket.files.new(
    key: "models/#{id}", 
    body: model_file.read, 
    public: true 
    ) 

    model.save 

    update_columns model_url: model.public_url 
    end

我試圖改變Ajax調用的data場data: {file: this.file, fileName: this.file.name}但我不確定如何從導軌側訪問這兩個參數。如果我以這種方式更改數據參數，它會導致它上傳文件object Object。 request.body是一個StringIO紅寶石類型。當數據字段是this.file（即它將文件上傳到谷歌存儲器）時，該方法本身工作，但是，文件名失去了擴展，這不是理想的。

所以總結一下，如何在Rails後端訪問上傳的文件名？？

來源

2017-04-06 quicklikerabbit

被成功上傳的文件？你可以添加被調用的上傳操作的日誌嗎？ – Jeremie

是的，上面的代碼成功上傳模型 – quicklikerabbit

如何操作日誌？ – Jeremie

非常感謝@kasperite提出了這個使用FORMDATA的，這是這個答案的重要組成部分。我改變了Ajax調用是這樣的：

@action.bound uploadFile() { 
    let form = new FormData(); 
    form.append("file", this.file); 
    $.ajax({ 
    url: AppConstants.APIEndpoints.USERLOCATIONS + '/1/photos/1/upload', 
    headers: { "Authorization": localStorage.getItem('authToken') }, 
    data: form, 
    processData: false, 
    contentType: false, 
    type: 'POST', 
    success: function (data) { 
     alert(this.data.name + " uploaded successfully!"); 
    } 
    }); 
}

然後改變了我的控制器看起來像這樣：

def upload 
    @photo.upload_model(params[:file].original_filename, params[:file].tempfile) 
end

params[:file].original_filename是文件名，而params[:file].tempfile是實際的文件。

我的類方法現在看起來是這樣的：

def upload_model(original_filename, model_file) 
    model = StorageBucket.files.new(
    key: "models/#{id}-#{original_filename}", 
    body: model_file.read, 
    public: true 
) 

    model.save 

    update_columns model_url: model.public_url 
end

來源

2017-04-07 00:24:10 quicklikerabbit

您是否嘗試過使用FormData你的情況，這將是：

JS：

// Use FormData to build params 

let form = new FormData(); 
form.append("file_name", file[0].name); 

// Send form as part of ajax post 

$.ajax({ 
    ... 
    data: form, 
    ... 
})

然後在鐵軌上的一面，你可以得到file_name通過params[:file_name]（在控制器）

這是一個快速建議，希望它能幫助你。

乾杯

來源

2017-04-06 23:31:16 kasperite

獲取文件名從文件上傳陣營前端

回答

相關問題