使用laravel,vue,axios和干预图像,强制下载作为http响应返回的下载图像文件

时间:2019-02-10 16:36:23

标签: php laravel vue.js axios intervention

我正在尝试使用Laravel,Vue,Axios和Intervention映像建立媒体资产数据库。 我希望用户能够在下载图像之前设置所需的图像高度和宽度。然后使用axios后请求将其发送到控制器。在控制器内部,干预图像正在运行其magic(k),并返回我调整大小后的文件作为响应。

现在,我希望作为响应返回的图像触发下载。我需要如何处理axios响应?

这是我目前拥有的:

Axios请求:

resize(file) {
        this.file = file;

        let formData = new FormData();
        formData.append('imageHeight', this.imageHeight);
        formData.append('imageWidth', this.imageWidth);

        axios.post('files/resize/' + file.id, formData).then(response => {
            console.log(response.data);
        })
        .catch(error => {
            console.log(error);
            this.errors = error.response.data.errors;
            this.showNotification(error.response.data.message, false);
            this.fetchFile(this.activeTab, this.pagination.current_page);
        });
    }

控制器:

public function resize($id, Request $request)
{
    $file = File::where('id', $id)->where('user_id', Auth::id())->first();

    $originalImage = $file->getName($file->type, $file->name, $file->extension);
    $originalImagePath = Storage::get($originalImage);

    $imageHeight = $request['imageHeight'];
    $imageWidth = $request['imageWidth'];

    if ($img = Image::make($originalImagePath)) {
        return $img->resize($imageWidth,$imageHeight)->response();
    }
}

1 个答案:

答案 0 :(得分:0)

您将希望library(shiny) library(shinyWidgets) library(shinyjs) js <- function(Min, Max, Start){ sprintf(paste( "var slider = document.getElementById('Histoslider').noUiSlider;", "slider.updateOptions({", " start: %s,", " range: {min: %s, max: %s},", " format: wNumb({", " encoder: function(x){return parseFloat(Math.pow(10,x));}", " })", "});", "var pipsValues = $('.noUi-value');", "pipsValues.each(function(){$(this).html('10<sup>'+$(this).attr('data-value')+'</sup>')});", sep = "\n" ), Start, Min, Max) } ui <- fluidPage( useShinyjs(), tags$br(), fluidRow( column(4, uiOutput('TestSliderOut'), actionButton(inputId = "UpdateSlider", label = 'Update') ), column(6, sliderInput("slider2", label = NULL, min = -5, max = 20, value= c(1, 5), step = 1), numericInput(inputId = 'SlMin', label = 'Min', value = 1, min = -5, max = 20), numericInput(inputId = 'SlMax', label = 'Max', value = 5, min = -5, max = 20), numericInput(inputId = 'SlVal', label = 'Val', value = 3, min = -5, max = 20), br(), h5('Update counter'), verbatimTextOutput(outputId = "updates"), h5('slider value'), verbatimTextOutput(outputId = 'ouputval') ) ) ) server <- function(input, output, session) { values <- reactiveValues( Counter = 0) output$TestSliderOut <- renderUI({ noUiSliderInput( inputId = "Histoslider", label = "Slider vertical:", min = -2, max = 4, step = 0.01, value = 0, margin = 100, pips = list(mode="range", density=2), orientation = "vertical", width = "300px", height = "300px", direction = "rtl", behaviour = "tap" ) }) observeEvent(input$slider2, { ## simulates the change of multipe parameters of the slider: min, max, value newvalue <- (input$slider2[2]-input$slider2[1])/2+input$slider2[1] updateNumericInput(session, inputId = 'SlMin', value = input$slider2[1]) updateNumericInput(session, inputId = 'SlMax', value = input$slider2[2]) updateNumericInput(session, inputId = 'SlVal', value = newvalue) }) observe({ updateNoUiSliderInput(session, inputId = 'Histoslider', range = c(input$SlMin, input$SlMax), value = input$SlVal) shinyjs::delay(1, { ## delay the javascript so that it runs after the slider has updated its values runjs(js(input$SlMin, input$SlMax, input$SlVal)) }) }) output$updates <- renderPrint(values$Counter) output$ouputval <- renderPrint(input$Histoslider) observeEvent(input$SlMin, { values$nouiMin <- input$SlMin }) observeEvent(input$SlMax, { values$nouiMax <- input$SlMax }) observeEvent(input$SlVal, { values$nouiVal <- input$SlVal }) observeEvent(input$Histoslider, { print('changing code') runjs(js(values$nouiMin, values$nouiMax, values$nouiVal)) ## fires ones on first build of the slider }, once = TRUE) } shinyApp(ui, server) 响应标头为Content-Disposition,而不是attachment

http://image.intervention.io/use/http