How to add my funciton

[xbotao]

I want to add the function that upload pictures to third party static server qiniu(七牛). #77 I known it should alter code-mirror.js "_onPaste: function (event) {"

But I don't known how to start.

[xbotao]

I have a problem when add myown code.

1. install qiniu @hexo-admin Path

   npm install qiniu --save

2. require qiniu@./hexo-admin/client/code-mirror.js

   var qiniu = require("qiniu")

3. gulp build

   gulp build

4. open http://localhost:4000/admin

At this time, the qiniu moudle is blocking，the code is stopping @"var qiniu = require("qiniu")"

---

I test qiniu moudle at a simple node project, it's OK.

[pirtleshell]

What you want to do looks like overkill. Pasted images are saved in source/images in your hexo project. They will upload with the rest of your site to the server when you deploy.

If you really want hexo-admin to be responsible for this, quiniu might not be working because you are trying to run it in the browser. You should try requiring it server-side in the images/upload API function.

[xbotao]

Thanks!

[xbotao]

I'm a newbie of Js. Could you help me about how to add my function. my option like this:

1. add getToken @ client/api/rest.js

   uploadImage: (data) => post('/images/upload', {data: data}),
   getToken: (data) => post('/qiniu/token', {data: data}),
   remove: (id) => post('/posts/' + id + '/remove'),

2. add response @ api.js after use('images/upload'

   use('qiniu/token', function (req, res, next) {
   //if(req.method == 'POST')
     console.log('qiniu token');
   });

The post can be sended, but the log can not show.

Did I miss something?

[pirtleshell]

Those logs should appear in your terminal (where you ran hexo server) because they are coming from the server and not the browser. If they don't show up, try using hexo's logging, hexo.log.i('your message here').

I think you might be over complicating things, though. Your pasted images are saved to your image folder. They will upload to the server just like everything else.

If you want to use qiniu, I wouldn't go through the trouble of creating an api function. Assuming you always want uploaded images to use it, you can put the logic in the writeFile callback.

var myUploadFunction = function (bufferData, filename) {
    // write your logic here, using qiniu or whatever
}
...
// inside the images/upload api function
fs.writeFile(outpath, buf, function (err) {
  if (err) {
    console.log(err)
  }
  myUploadFunction(buf, hexo.config.root + filename)   // add the function here
  hexo.source.process([filename]).then(function () {
    res.done(hexo.config.root + filename)
   });
})

[xbotao]

Thanks for your reply!

the logs appear

I build the hexo-main by gulp build before, the logs can not be show. They appear in the terminal after building the hexo-main with 'gulp' command.

the reason I want to use qiniu

I know that the pasted images are saved to image folder.But if I copy the '.md' file to another computy or other application,I need copy the images. Use qiniu, I will not need copy the image, it can be view by the link. like http://oj3pony5x.bkt.clouddn.com/my-hexo-main.png

And qiniu could acceleration the image load speed when browse the posts.The githhub pages is slow in China.

the best method to use qiniu

I have used the qiniu like you say.But it need save the image to local folder and then upload to qiniu. I think the best method to use qiniu is uploading the image from clipboard.

I have a problem doing it.qiniu upload image from clipboard need the XMLHttpRequest(), it can not run on the server.So I want get the qiniu token from server and upload the image on the render.

[xbotao]

I add qiniu config like this:

code-mirror.js

• #L7
• #L11
• #L100

client/api/rest.js -#L50

api.js -#L259